From 04b2b1cc4f207fa4d1d98cac4587525a94b362fb Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 23 Nov 2024 16:16:05 +0100
Subject: [PATCH 01/70] improve code highlightings

---
 web/src/style.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index ab6d64be3b0..62e39860c55 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -41,6 +41,7 @@
 
   --wp-code-100: theme('colors.int-wp-secondary.300');
   --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-custom: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -90,6 +91,7 @@
 
   --wp-code-100: theme('colors.int-wp-secondary.700');
   --wp-code-200: theme('colors.int-wp-secondary.800');
+  --wp-code-custom: #3d444d;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -149,5 +151,5 @@ body,
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-200 rounded-md text-wp-code-text-100 px-1 py-px;
+  @apply bg-wp-code-custom rounded-lg text-wp-code-text-100 px-1.5 py-0.5;
 }

From 994b797874d458200ca2439a129b37f3d0526e19 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 1 Dec 2024 20:31:56 +0100
Subject: [PATCH 02/70] consolidate code bg colours

---
 web/src/components/repo/pipeline/PipelineLog.vue |  4 ++--
 web/src/style.css                                | 10 +++-------
 web/windi.config.ts                              |  5 ++---
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 124d7ada3e0..a16e223f6c7 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-bg-100 px-4 py-2">
         <span class="text-base font-bold text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
@@ -96,7 +96,7 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center w-full bg-wp-code-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
+        class="flex items-center w-full bg-wp-code-bg-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
       >
         <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
diff --git a/web/src/style.css b/web/src/style.css
index 62e39860c55..5da5d3f4b7e 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,9 +39,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
-  --wp-code-custom: #f0f1f3;
+  --wp-code-bg-100: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -89,9 +87,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.700');
-  --wp-code-200: theme('colors.int-wp-secondary.800');
-  --wp-code-custom: #3d444d;
+  --wp-code-bg-100: #3d444d;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -145,7 +141,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  @apply bg-wp-code-bg-100 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
   white-space: pre-wrap;
 }
 
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 51fa05513e2..121ffd8513e 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -193,9 +193,8 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
-        'wp-code': {
-          100: 'var(--wp-code-100)',
-          200: 'var(--wp-code-200)',
+        'wp-code-bg': {
+          100: 'var(--wp-code-bg-100)',
         },
         'wp-code-text': {
           100: 'var(--wp-code-text-100)',

From a527b4d4d7c3ed26b8e7b8945e4d241f941aaee9 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 14:18:51 +0100
Subject: [PATCH 03/70] only change code-box-inline bg

---
 web/src/style.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 5da5d3f4b7e..86688548041 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -103,7 +103,7 @@ body,
 }
 
 .vue-notification {
-  @apply rounded-md text-base border-l-6;
+  @apply border-l-6 rounded-md text-base;
 }
 
 .vue-notification .notification-title {
@@ -129,7 +129,7 @@ body,
 *::-webkit-scrollbar-thumb {
   transition: background 0.2s ease-in-out;
   border: 3px solid transparent;
-  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+  @apply bg-clip-content bg-cool-gray-200 dark:bg-dark-200 rounded-full;
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -141,11 +141,11 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-bg-100 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-custom rounded-lg text-wp-code-text-100 px-1.5 py-0.5;
+  @apply bg-wp-code-custom px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
 }

From a19c2f16bd77229889b081a9ebebdc4452c3bb45 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 14:33:57 +0100
Subject: [PATCH 04/70] use wp-code-300 as definition name

---
 .../components/repo/pipeline/PipelineLog.vue  | 26 +++++++++----------
 web/src/style.css                             |  5 ++--
 web/windi.config.ts                           |  7 +++--
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index a16e223f6c7..575952984c8 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:mt-0 !md:rounded-md overflow-hidden"
+      class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-bg-100 px-4 py-2">
-        <span class="text-base font-bold text-wp-code-text-alt-100">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
+        <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
         </span>
 
-        <div class="flex flex-row items-center ml-auto gap-x-2">
+        <div class="flex flex-row items-center gap-x-2 ml-auto">
           <IconButton
             v-if="step?.finished !== undefined && hasLogs"
             :is-loading="downloadInProgress"
@@ -37,7 +37,7 @@
             @click="autoScroll = !autoScroll"
           />
           <IconButton
-            class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
+            class="!md:hidden !hover:bg-white !hover:bg-opacity-10"
             icon="close"
             @click="$emit('update:step-id', null)"
           />
@@ -47,13 +47,13 @@
       <div
         v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
         ref="consoleElement"
-        class="w-full max-w-full grid grid-cols-[min-content,minmax(0,1fr),min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto text-xs md:text-sm"
+        class="flex-grow grid grid-cols-[min-content,minmax(0,1fr),min-content] auto-rows-min p-4 w-full max-w-full text-xs md:text-sm overflow-x-hidden overflow-y-auto"
       >
-        <div v-for="line in log" :key="line.index" class="contents font-mono">
+        <div v-for="line in log" :key="line.index" class="font-mono contents">
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
+            class="text-right pr-6 pl-2 text-wp-code-text-alt-100 whitespace-nowrap select-none"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -65,7 +65,7 @@
           </a>
           <!-- eslint-disable vue/no-v-html -->
           <span
-            class="align-top whitespace-pre-wrap break-words"
+            class="align-top break-words whitespace-pre-wrap"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-10.168.64.121-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -75,7 +75,7 @@
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="text-wp-code-text-alt-100 whitespace-nowrap select-none text-right pr-1"
+            class="text-right pr-1 text-wp-code-text-alt-100 whitespace-nowrap select-none"
             :class="{
               'bg-opacity-40 dark:bg-opacity-50 bg-red-600 dark:bg-red-800': line.type === 'error',
               'bg-opacity-40 dark:bg-opacity-50 bg-yellow-600 dark:bg-yellow-800': line.type === 'warning',
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div class="m-auto text-xl text-wp-text-alt-100">
+      <div class="m-auto text-wp-text-alt-100 text-xl">
         <span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.started">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
@@ -96,9 +96,9 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center w-full bg-wp-code-bg-100 text-md text-wp-code-text-alt-100 p-4 font-bold"
+        class="flex items-center bg-wp-code-300 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
       >
-        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
+        <PipelineStatusIcon :status="step.state" class="!w-4 !h-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
         <span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
diff --git a/web/src/style.css b/web/src/style.css
index 86688548041..f4d76140679 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,7 +39,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-bg-100: #f0f1f3;
+  --wp-code-300: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -87,7 +87,6 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-bg-100: #3d444d;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -147,5 +146,5 @@ body,
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-custom px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
+  @apply bg-wp-code-300 px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 121ffd8513e..88373b4cc53 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -193,9 +193,12 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
-        'wp-code-bg': {
-          100: 'var(--wp-code-bg-100)',
+        'wp-code': {
+          100: 'var(--wp-code-100)',
+          200: 'var(--wp-code-200)',
+          300: 'var(--wp-code-300)',
         },
+
         'wp-code-text': {
           100: 'var(--wp-code-text-100)',
         },

From a3506d897beae3a2ac6ea116eb2a9d941f85f1a3 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 14:40:39 +0100
Subject: [PATCH 05/70] reset pipeline bg color

---
 web/src/components/repo/pipeline/PipelineLog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 575952984c8..09fc3a7aac0 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
@@ -96,7 +96,7 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center bg-wp-code-300 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
+        class="flex items-center bg-wp-code-100 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
       >
         <PipelineStatusIcon :status="step.state" class="!w-4 !h-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>

From b9f4e9c574ccabb9d924b7cdfead2163f5584495 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 14:47:47 +0100
Subject: [PATCH 06/70] use wp-text instead of wp-code-text

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index f4d76140679..ba87b226cee 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -146,5 +146,5 @@ body,
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-300 px-1.5 py-0.5 rounded-lg text-wp-code-text-100;
+  @apply bg-wp-code-300 px-1.5 py-0.5 rounded-md text-wp-text-100;
 }

From f20d3550bbdd2d1b7a5366f56798187402558135 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 14:48:15 +0100
Subject: [PATCH 07/70] increase top margin of description text to avoid
 codebox overlap

---
 web/src/components/form/InputField.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 4c30879e9d2..1239af55b91 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
     <div class="flex items-center mb-2">
-      <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
+      <label class="font-bold text-wp-text-100" :for="id" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
     <slot :id="id" />
-    <div v-if="$slots.description" class="ml-1 text-wp-text-alt-100">
+    <div v-if="$slots.description" class="mt-1 ml-1 text-wp-text-alt-100">
       <slot name="description" />
     </div>
   </div>

From 521a56d0327de25e8a0c830f45ac09ac11f0e7d0 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Wed, 18 Dec 2024 15:03:18 +0100
Subject: [PATCH 08/70] set dark bg color

---
 web/src/style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/web/src/style.css b/web/src/style.css
index ba87b226cee..07dc5311195 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,6 +39,8 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
+  --wp-code-100: theme('colors.int-wp-secondary.300');
+  --wp-code-200: theme('colors.int-wp-secondary.600');
   --wp-code-300: #f0f1f3;
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
@@ -87,6 +89,9 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
+  --wp-code-100: theme('colors.int-wp-secondary.700');
+  --wp-code-200: theme('colors.int-wp-secondary.800');
+  --wp-code-300: #262934;
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 

From cb1d134cd5f90a406568435c6357728981333d0b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:07:00 +0100
Subject: [PATCH 09/70] use existing color pallette colors for inline code bg

---
 web/src/style.css   | 13 ++++++-------
 web/windi.config.ts |  2 +-
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 07dc5311195..54f90c8f1fc 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,9 +39,9 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
-  --wp-code-300: #f0f1f3;
+  --wp-code-100: theme('colors.gray.200');
+  --wp-code-300: theme('colors.int-wp-secondary.300');
+  --wp-code-600: theme('colors.int-wp-secondary.600');
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -89,9 +89,8 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.700');
-  --wp-code-200: theme('colors.int-wp-secondary.800');
-  --wp-code-300: #262934;
+  --wp-code-100: theme('colors.int-wp-secondary.300');
+  --wp-code-200: theme('colors.int-wp-secondary.600');
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -151,5 +150,5 @@ body,
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-300 px-1.5 py-0.5 rounded-md text-wp-text-100;
+  @apply bg-wp-code-100 px-1.5 py-0.5 rounded-md text-wp-text-100;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 88373b4cc53..38afab6dac1 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -196,7 +196,7 @@ export default defineConfig({
         'wp-code': {
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',
-          300: 'var(--wp-code-300)',
+          300: 'var(--wp-code-100)',
         },
 
         'wp-code-text': {

From f951cf33cc8e1d278bd2c7dfd0404d84227b836a Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:09:07 +0100
Subject: [PATCH 10/70] align dark colors with palette subcolors

---
 web/src/style.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index 54f90c8f1fc..11c54baf39b 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -50,10 +50,11 @@
 }
 
 :root[data-theme='dark'] {
-  --wp-background-100: theme('colors.int-wp-secondary.300');
-  --wp-background-200: theme('colors.int-wp-secondary.400');
-  --wp-background-300: theme('colors.int-wp-secondary.500');
-  --wp-background-400: theme('colors.int-wp-secondary.600');
+  --wp-background-100: theme('colors.black');
+  --wp-background-200: theme('colors.int-wp-secondary.200');
+  --wp-background-300: theme('colors.int-wp-secondary.300');
+  --wp-background-400: theme('colors.int-wp-secondary.400');
+  --wp-background-500: theme('colors.int-wp-secondary.500');
 
   --wp-text-100: theme('colors.gray.300');
   --wp-text-200: theme('colors.gray.200');

From 69d244fe591dbd9f35222463aaa9a5f887af6bac Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:27:57 +0100
Subject: [PATCH 11/70] bump all tailwind classes by +100 to match new logic
 scheme

---
 web/src/App.vue                               |  8 ++---
 .../admin/settings/queue/AdminQueueStats.vue  | 18 +++++-----
 web/src/components/agent/AgentList.vue        |  4 +--
 web/src/components/atomic/CountBadge.vue      |  2 +-
 web/src/components/atomic/ListItem.vue        |  4 +--
 web/src/components/form/TextField.vue         |  4 +--
 web/src/components/layout/Panel.vue           |  8 ++---
 web/src/components/layout/Settings.vue        |  8 ++---
 web/src/components/layout/header/Navbar.vue   | 22 ++++++------
 web/src/components/layout/scaffold/Header.vue | 12 +++----
 web/src/components/layout/scaffold/Tabs.vue   |  8 ++---
 .../pipeline-feed/PipelineFeedSidebar.vue     |  6 ++--
 web/src/components/registry/RegistryList.vue  |  2 +-
 web/src/components/repo/RepoItem.vue          | 14 ++++----
 .../repo/pipeline/PipelineStepList.vue        | 36 +++++++++----------
 web/src/components/secrets/SecretList.vue     |  2 +-
 web/src/views/Login.vue                       | 16 ++++-----
 web/src/views/admin/AdminOrgs.vue             |  2 +-
 web/src/views/admin/AdminQueue.vue            |  4 +--
 web/src/views/admin/AdminRepos.vue            |  4 +--
 web/src/views/admin/AdminUsers.vue            |  6 ++--
 web/src/views/repo/settings/Crons.vue         |  4 +--
 22 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 98e0ffb41d2..e709cfed83f 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="app flex flex-col m-auto w-full h-full bg-wp-background-200 dark:bg-wp-background-100">
+  <div class="flex flex-col bg-wp-background-300 dark:bg-wp-background-200 m-auto w-full h-full app">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
-      <main class="relative flex min-h-0 h-full">
-        <div id="scroll-component" class="flex flex-col overflow-y-auto flex-grow">
+      <main class="relative flex h-full min-h-0">
+        <div id="scroll-component" class="flex flex-col flex-grow overflow-y-auto">
           <router-view />
         </div>
         <transition name="slide-right">
-          <PipelineFeedSidebar class="shadow-md border-l w-full absolute top-0 right-0 bottom-0 max-w-80 xl:max-w-96" />
+          <PipelineFeedSidebar class="top-0 right-0 bottom-0 absolute shadow-md border-l w-full max-w-80 xl:max-w-96" />
         </transition>
       </main>
     </template>
diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index cc58ddc8418..8dac18cd6e9 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,22 +1,22 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="bg-wp-background-200 border border-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 rounded-md py-5 px-5 w-full"
+      class="border-wp-background-400 bg-wp-background-300 dark:bg-wp-background-200 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
-        <h3 class="text-lg font-semibold leading-tight uppercase flex-1">
+        <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">
           {{ $t('admin.settings.queue.stats.completed_count') }}
         </h3>
       </div>
-      <div class="relative overflow-hidden transition-all duration-500">
+      <div class="relative transition-all duration-500 overflow-hidden">
         <div>
           <div class="pb-4 lg:pb-6">
-            <h4 class="text-2xl lg:text-3xl font-semibold leading-tight inline-block">
+            <h4 class="inline-block font-semibold text-2xl lg:text-3xl leading-tight">
               {{ stats.completed_count }}
             </h4>
           </div>
           <div v-if="total > 0" class="pb-4 lg:pb-6">
-            <div class="overflow-hidden rounded-full h-3 flex transition-all duration-500">
+            <div class="flex rounded-full h-3 transition-all duration-500 overflow-hidden">
               <div
                 v-for="item in data"
                 :key="item.key"
@@ -28,15 +28,15 @@
               </div>
             </div>
           </div>
-          <div class="flex -mx-4 sm:flex-wrap">
+          <div class="flex sm:flex-wrap -mx-4">
             <div
               v-for="(item, index) in data"
               :key="item.key"
-              class="px-4 md:w-1/4 sm:w-full"
+              class="px-4 sm:w-full md:w-1/4"
               :class="{ 'md:border-l border-gray-300 dark:border-gray-600': index !== 0 }"
             >
-              <div class="text-sm whitespace-nowrap overflow-hidden text-ellipsis">
-                <span class="inline-block w-2 h-2 rounded-full mr-1 align-middle" :class="`${item.color}`">&nbsp;</span>
+              <div class="text-ellipsis text-sm whitespace-nowrap overflow-hidden">
+                <span class="inline-block mr-1 rounded-full w-2 h-2 align-middle" :class="`${item.color}`">&nbsp;</span>
                 <span class="align-middle">{{ item.label }}</span>
               </div>
               <div class="font-medium text-lg">
diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 230e00e7fb9..20e65032646 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,11 +3,11 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
-        <span class="hidden md:inline-block space-x-2">
+        <span class="md:inline-block space-x-2 hidden">
           <Badge
             v-if="props.isAdmin === true && agent.org_id !== -1"
             :label="$t('admin.settings.agents.org.badge')"
diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 44c96e8b0dc..29c24ab4a28 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="text-xs font-bold inline-block min-w-5 leading-4 rounded-full bg-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 text-center py-0.5 px-1.5"
+    class="inline-block bg-wp-background-400 dark:bg-wp-background-200 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 0f6ec12b2a4..2e6f63a76e9 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,9 +2,9 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="w-full flex border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200"
+    class="flex border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-400 dark:hover:bg-wp-background-400': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index 4facf52574f..8f9d2bda205 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="w-full border border-wp-control-neutral-200 py-1 px-2 rounded-md bg-wp-background-100 focus-visible:outline-none focus-visible:border-wp-control-neutral-300"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 6a8431660ff..e0186087be9 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,18 +1,18 @@
 <template>
   <div
-    class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
+    class="border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
+      class="flex gap-2 bg-wp-background-400 px-4 py-2 w-full font-bold text-wp-text-100"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="transition-transform duration-150 min-w-6 h-6"
+        class="min-w-6 h-6 transition-transform duration-150"
         :class="{ 'transform rotate-90': !collapsed }"
       />
       {{ title }}
@@ -24,7 +24,7 @@
       }"
       class="transition-height duration-150 overflow-hidden"
     >
-      <div class="w-full p-4 text-wp-text-100">
+      <div class="p-4 w-full text-wp-text-100">
         <slot />
       </div>
     </div>
diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
index 764a6271fba..b5c50859913 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -1,15 +1,15 @@
 <template>
   <Panel>
-    <div class="flex flex-col border-b mb-4 pb-4 justify-center dark:border-wp-background-100">
-      <div class="flex items-center justify-between">
-        <h1 class="text-xl text-wp-text-100 flex items-center gap-1">
+    <div class="flex flex-col justify-center dark:border-wp-background-200 mb-4 pb-4 border-b">
+      <div class="flex justify-between items-center">
+        <h1 class="flex items-center gap-1 text-wp-text-100 text-xl">
           {{ title }}
           <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
         </h1>
         <slot v-if="$slots.titleActions" name="titleActions" />
       </div>
 
-      <div class="flex flex-wrap gap-x-4 gap-y-2 items-center justify-between">
+      <div class="flex flex-wrap justify-between items-center gap-x-4 gap-y-2">
         <p v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</p>
         <div v-if="$slots.headerActions">
           <slot name="headerActions" />
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 56aebb29147..1ff2726dd8b 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,39 +1,39 @@
 <template>
   <nav
-    class="flex bg-wp-primary-200 dark:bg-wp-primary-300 text-neutral-content p-4 border-b border-wp-background-100 font-bold text-wp-primary-text-100"
+    class="flex border-wp-background-200 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
         <WoodpeckerLogo class="w-8 h-8" />
         <span class="text-xs" :title="version?.current">{{ version?.currentShort }}</span>
       </router-link>
-      <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-link navbar-clickable">
+      <router-link v-if="user" :to="{ name: 'repos' }" class="navbar-clickable navbar-link">
         <span class="flex md:hidden">{{ $t('repos') }}</span>
-        <span class="hidden md:flex">{{ $t('repositories') }}</span>
+        <span class="md:flex hidden">{{ $t('repositories') }}</span>
       </router-link>
-      <a href="https://woodpecker-ci.org/" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
+      <a href="https://woodpecker-ci.org/" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
         $t('docs')
       }}</a>
-      <a v-if="enableSwagger" :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{
+      <a v-if="enableSwagger" :href="apiUrl" target="_blank" class="md:flex hidden navbar-clickable navbar-link">{{
         $t('api')
       }}</a>
     </div>
-    <div class="flex ml-auto -m-1.5 items-center space-x-2">
+    <div class="flex items-center space-x-2 -m-1.5 ml-auto">
       <IconButton
         v-if="user?.admin"
-        class="navbar-icon relative"
+        class="relative navbar-icon"
         :title="$t('settings')"
         :to="{ name: 'admin-settings' }"
       >
         <Icon name="settings" />
         <div
           v-if="version?.needsUpdate"
-          class="absolute top-2 right-2 bg-int-wp-state-error-100 rounded-full w-3 h-3"
+          class="top-2 right-2 absolute bg-int-wp-state-error-100 rounded-full w-3 h-3"
         />
       </IconButton>
 
       <ActivePipelines v-if="user" class="navbar-icon" />
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="!p-1.5 navbar-icon">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
@@ -66,7 +66,7 @@ const { enableSwagger } = config;
 
 <style scoped>
 .navbar-icon {
-  @apply w-11 h-11 rounded-md p-2.5;
+  @apply p-2.5 rounded-md w-11 h-11;
 }
 
 .navbar-icon :deep(svg) {
@@ -74,6 +74,6 @@ const { enableSwagger } = config;
 }
 
 .navbar-link {
-  @apply px-3 py-2 -my-1 rounded-md hover-effect;
+  @apply -my-1 px-3 py-2 rounded-md hover-effect;
 }
 </style>
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 0ef3035793a..c9ec95a6543 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,10 +1,10 @@
 <template>
   <header
-    class="bg-wp-background-100 border-b-1 border-wp-background-400 dark:border-wp-background-100 dark:bg-wp-background-300 text-wp-text-100"
+    class="border-wp-background-500 dark:border-wp-background-200 bg-wp-background-200 dark:bg-wp-background-400 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
-      <div class="flex w-full md:items-center flex-col py-3 gap-2 md:gap-10 md:flex-row md:justify-between">
+      <div class="flex md:flex-row flex-col md:justify-between md:items-center gap-2 md:gap-10 py-3 w-full">
         <div
           class="flex items-center content-start min-h-10"
           :class="{
@@ -18,7 +18,7 @@
             class="flex-shrink-0 mr-2 <md:hidden md:justify-between w-8 h-8"
             @click="goBack"
           />
-          <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
+          <h1 class="flex items-center gap-x-2 min-w-0 text-wp-text-100 text-xl">
             <slot name="title" />
           </h1>
         </div>
@@ -32,7 +32,7 @@
         />
         <div
           v-if="$slots.headerActions"
-          class="flex items-center md:justify-end gap-x-2 min-w-0"
+          class="flex md:justify-end items-center gap-x-2 min-w-0"
           :class="{
             'md:flex-1': searchBoxPresent,
           }"
@@ -41,9 +41,9 @@
         </div>
       </div>
 
-      <div v-if="enableTabs" class="flex md:items-center flex-col py-2 md:flex-row md:justify-between md:py-0">
+      <div v-if="enableTabs" class="flex md:flex-row flex-col md:justify-between md:items-center py-2 md:py-0">
         <Tabs class="<md:order-2" />
-        <div v-if="$slots.headerActions" class="flex content-start md:justify-end">
+        <div v-if="$slots.headerActions" class="flex md:justify-end content-start">
           <slot name="tabActions" />
         </div>
       </div>
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 8ac61e538b9..3055735445e 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -1,22 +1,22 @@
 <template>
-  <div class="flex flex-wrap mt-2 md:gap-4">
+  <div class="flex flex-wrap md:gap-4 mt-2">
     <router-link
       v-for="tab in tabs"
       :key="tab.title"
       v-slot="{ isActive, isExactActive }"
       :to="tab.to"
-      class="border-transparent w-full py-1 md:w-auto flex cursor-pointer md:border-b-2 text-wp-text-100 items-center"
+      class="flex items-center py-1 border-transparent md:border-b-2 w-full md:w-auto text-wp-text-100 cursor-pointer"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
       <Icon
         v-if="isExactActive || (isActive && tab.matchChildren)"
         name="chevron-right"
-        class="md:hidden flex-shrink-0"
+        class="flex-shrink-0 md:hidden"
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex gap-2 items-center md:justify-center flex-row py-1 px-2 w-full min-w-20 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 rounded-md"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-200 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 087a862b7ad..30da8649cb3 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
+    class="z-50 flex flex-col items-center border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,12 +12,12 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-b border-wp-background-400 py-4 px-2 w-full hover:bg-wp-background-300 dark:hover:bg-wp-background-400 hover:shadow-sm"
+      class="flex border-wp-background-500 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
 
-    <span v-if="sortedPipelines.length === 0" class="text-wp-text-100 m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
+    <span v-if="sortedPipelines.length === 0" class="m-4 text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
   </aside>
 </template>
 
diff --git a/web/src/components/registry/RegistryList.vue b/web/src/components/registry/RegistryList.vue
index 775a02eb4d2..97fc12db81f 100644
--- a/web/src/components/registry/RegistryList.vue
+++ b/web/src/components/registry/RegistryList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
     >
       <span>{{ registry.address }}</span>
       <IconButton
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 3085ea197c8..37926cb701b 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,10 +2,10 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border rounded-md bg-wp-background-100 overflow-hidden p-4 border-wp-background-400 dark:bg-wp-background-200 cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300"
+    class="flex flex-col border-wp-background-500 bg-wp-background-200 hover:bg-wp-background-400 dark:hover:bg-wp-background-400 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
-    <div class="grid grid-cols-[auto,1fr] gap-y-4 items-center">
-      <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+    <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
+      <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
       <div class="ml-auto text-wp-text-100">
         <div
           v-if="repo.visibility === RepoVisibility.Private"
@@ -21,14 +21,14 @@
         </div>
       </div>
 
-      <div class="col-span-2 text-wp-text-100 flex w-full gap-x-4">
+      <div class="flex gap-x-4 col-span-2 w-full text-wp-text-100">
         <template v-if="lastPipeline">
-          <div class="flex flex-1 min-w-0 gap-x-1 items-center">
+          <div class="flex flex-1 items-center gap-x-1 min-w-0">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
-            <span class="whitespace-nowrap overflow-hidden overflow-ellipsis">{{ shortMessage }}</span>
+            <span class="whitespace-nowrap overflow-ellipsis overflow-hidden">{{ shortMessage }}</span>
           </div>
 
-          <div class="flex flex-shrink-0 gap-x-1 items-center ml-auto">
+          <div class="flex flex-shrink-0 items-center gap-x-1 ml-auto">
             <Icon name="since" />
             <span>{{ since }}</span>
           </div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 50006de2560..07712d3423d 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex flex-col w-full md:w-3/12 md:max-w-md md:min-w-xs text-wp-text-100 gap-2 pb-2">
+  <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
     >
-      <div class="flex space-x-1 items-center flex-shrink-0">
+      <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
           <Icon v-if="pipeline.event === 'cron'" name="stopwatch" />
           <img v-else class="rounded-md w-6" :src="pipeline.author_avatar" />
@@ -12,7 +12,7 @@
       </div>
       <a
         v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
-        class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
+        class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
         :href="pipeline.forge_url"
       >
         <Icon name="pull-request" />
@@ -20,7 +20,7 @@
       </a>
       <router-link
         v-else-if="pipeline.event === 'push' || pipeline.event === 'manual' || pipeline.event === 'deployment'"
-        class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
+        class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
         :to="{ name: 'repo-branch', params: { branch: prettyRef } }"
       >
         <Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
@@ -28,19 +28,19 @@
         <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
         <span class="truncate">{{ prettyRef }}</span>
       </router-link>
-      <div v-else class="flex space-x-1 items-center min-w-0">
+      <div v-else class="flex items-center space-x-1 min-w-0">
         <Icon v-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
 
         <span class="truncate">{{ prettyRef }}</span>
       </div>
-      <div class="flex items-center flex-shrink-0">
+      <div class="flex flex-shrink-0 items-center">
         <template v-if="pipeline.event === 'pull_request'">
           <Icon name="commit" />
           <span>{{ pipeline.commit.slice(0, 10) }}</span>
         </template>
         <a
           v-else
-          class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
+          class="flex items-center text-wp-link-100 hover:text-wp-link-200"
           :href="pipeline.forge_url"
           target="_blank"
         >
@@ -54,15 +54,15 @@
       <span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
     </Panel>
 
-    <div class="flex-grow min-h-0 w-full relative">
-      <div class="absolute top-0 left-0 right-0 h-full flex flex-col md:overflow-y-auto gap-y-2">
+    <div class="relative flex-grow w-full min-h-0">
+      <div class="top-0 right-0 left-0 absolute flex flex-col gap-y-2 h-full md:overflow-y-auto">
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="p-2 rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
+          class="border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
-            <div v-if="workflow.environ" class="flex flex-wrap gap-x-1 gap-y-2 text-xs justify-end pt-1 pr-1">
+            <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
               <div v-for="(value, key) in workflow.environ" :key="key">
                 <Badge :label="key" :value="value" />
               </div>
@@ -71,15 +71,15 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 py-2 px-1 hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 rounded-md"
+              class="flex items-center gap-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
                 name="chevron-right"
-                class="transition-transform duration-150 min-w-6 h-6"
+                class="min-w-6 h-6 transition-transform duration-150"
                 :class="{ 'transform rotate-90': !workflowsCollapsed[workflow.id] }"
               />
-              <PipelineStatusIcon :status="workflow.state" class="!h-4 !w-4" />
+              <PipelineStatusIcon :status="workflow.state" class="!w-4 !h-4" />
               <span class="truncate">{{ workflow.name }}</span>
               <PipelineStepDuration
                 v-if="workflow.started !== workflow.finished"
@@ -100,14 +100,14 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 w-full"
+              class="flex items-center gap-2 border-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
-                'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
+                'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
             >
-              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!h-4 !w-4" />
+              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!w-4 !h-4" />
               <span class="truncate">{{ step.name }}</span>
               <PipelineStepDuration :step="step" />
             </button>
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index 3201453d2f4..c48384e9f03 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
     >
       <span>{{ secret.name }}</span>
       <Badge
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index bc3a978f57a..52d007b8d53 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,26 +1,26 @@
 <template>
-  <main class="flex flex-col w-full h-full justify-center items-center">
+  <main class="flex flex-col justify-center items-center w-full h-full">
     <Error v-if="errorMessage" class="w-full md:w-3xl">
       <span class="whitespace-pre">{{ errorMessage }}</span>
-      <span v-if="errorDescription" class="whitespace-pre mt-1">{{ errorDescription }}</span>
+      <span v-if="errorDescription" class="mt-1 whitespace-pre">{{ errorDescription }}</span>
       <a
         v-if="errorUri"
         :href="errorUri"
         target="_blank"
-        class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer mt-1"
+        class="mt-1 text-wp-link-100 hover:text-wp-link-200 cursor-pointer"
       >
         <span>{{ errorUri }}</span>
       </a>
     </Error>
 
     <div
-      class="flex flex-col w-full overflow-hidden bg-wp-background-100 shadow border border-wp-background-400 dark:bg-wp-background-200 md:m-8 md:rounded-md md:flex-row md:w-3xl md:h-sm"
+      class="flex md:flex-row flex-col border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
-      <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 min-h-48 md:w-3/5">
-        <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 h-30 md:w-48 md:h-48" />
+      <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
+        <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />
       </div>
-      <div class="flex justify-center items-center flex-col md:w-2/5 min-h-48 gap-4 text-center">
-        <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
+      <div class="flex flex-col justify-center items-center gap-4 md:w-2/5 min-h-48 text-center">
+        <h1 class="text-wp-text-100 text-xl">{{ $t('welcome') }}</h1>
         <div class="flex flex-col gap-2">
           <Button
             v-for="forge in forges"
diff --git a/web/src/views/admin/AdminOrgs.vue b/web/src/views/admin/AdminOrgs.vue
index 2ce9e3f8032..9de3e096b79 100644
--- a/web/src/views/admin/AdminOrgs.vue
+++ b/web/src/views/admin/AdminOrgs.vue
@@ -4,7 +4,7 @@
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
       >
         <span>{{ org.name }}</span>
         <IconButton
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index 660fe34c174..e2bd7e4a2d1 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -29,7 +29,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="items-center mb-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+          class="items-center !bg-wp-background-300 !dark:bg-wp-background-200 mb-2"
         >
           <div
             class="flex items-center"
@@ -57,7 +57,7 @@
             />
           </div>
           <span class="ml-2">{{ task.id }}</span>
-          <span class="flex ml-auto gap-2">
+          <span class="flex gap-2 ml-auto">
             <Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
             <template v-for="(value, label) in task.labels">
               <Badge v-if="value" :key="label" :label="label.toString()" :value="value" />
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index 325a6dec67e..a108a5860d2 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -13,10 +13,10 @@
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
       >
         <span>{{ repo.full_name }}</span>
-        <div class="ml-auto flex items-center">
+        <div class="flex items-center ml-auto">
           <Badge v-if="!repo.active" class="<md:hidden mr-2" :label="$t('admin.settings.repos.disabled')" />
           <IconButton
             icon="chevron-right"
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index 31ef3b1e9ff..f1a13bc772e 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -14,13 +14,13 @@
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
       >
         <img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
         <Badge
           v-if="user.admin"
-          class="ml-auto hidden md:inline-block"
+          class="md:inline-block hidden ml-auto"
           :label="$t('admin.settings.users.admin.admin')"
         />
         <IconButton
@@ -53,7 +53,7 @@
 
         <InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
           <div class="flex gap-2">
-            <img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
+            <img v-if="selectedUser.avatar_url" class="rounded-md w-8 h-8" :src="selectedUser.avatar_url" />
             <TextField :id="id" v-model="selectedUser.avatar_url" />
           </div>
         </InputField>
diff --git a/web/src/views/repo/settings/Crons.vue b/web/src/views/repo/settings/Crons.vue
index 29540c127f2..9e0c41e8d19 100644
--- a/web/src/views/repo/settings/Crons.vue
+++ b/web/src/views/repo/settings/Crons.vue
@@ -18,7 +18,7 @@
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+        class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
       >
         <span class="grid grid-cols-3 w-full">
           <span>{{ cron.name }}</span>
@@ -74,7 +74,7 @@
           />
         </InputField>
 
-        <div v-if="isEditingCron" class="ml-auto mb-4">
+        <div v-if="isEditingCron" class="mb-4 ml-auto">
           <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-wp-text-100">
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
             {{ $t('repo.settings.crons.next_exec') }}:

From 56c1ff774062e9eaeaae6a3ba2a28ebc0c6538c1 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:32:44 +0100
Subject: [PATCH 12/70] downsize border-wp-background-500 to 400

---
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/layout/Panel.vue                      | 2 +-
 web/src/components/layout/scaffold/Header.vue            | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 4 ++--
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 web/src/views/Login.vue                                  | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 2e6f63a76e9..ada9d046455 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-400 dark:hover:bg-wp-background-400': clickable || to,
     }"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index e0186087be9..3fea4972855 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index c9ec95a6543..c9938d6d5fe 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-500 dark:border-wp-background-200 bg-wp-background-200 dark:bg-wp-background-400 border-b-1 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-200 bg-wp-background-200 dark:bg-wp-background-400 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 30da8649cb3..7e69e65b635 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-500 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-400 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 37926cb701b..26e9721bd7e 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-500 bg-wp-background-200 hover:bg-wp-background-400 dark:hover:bg-wp-background-400 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-400 dark:hover:bg-wp-background-400 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 07712d3423d..a06eb41d9ee 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 52d007b8d53..3720e5e32fa 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-500 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From 3822800fd59b733fe07308f2e9f535704e4af67e Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:40:23 +0100
Subject: [PATCH 13/70] adjust main bg color

---
 web/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index e709cfed83f..8ade35df027 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-wp-background-300 dark:bg-wp-background-200 m-auto w-full h-full app">
+  <div class="flex flex-col bg-wp-background-300 dark:bg-wp-background-300 m-auto w-full h-full app">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />

From 3b6553f3d416c42e40c8666a7a064c166244c797 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:41:54 +0100
Subject: [PATCH 14/70] reduce hover:bg-wp-background-400 to 300

---
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index ada9d046455..9ca2301e79d 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -4,7 +4,7 @@
     :to="to"
     class="flex border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-400 dark:hover:bg-wp-background-400': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 7e69e65b635..f5a628cbdff 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-400 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 26e9721bd7e..f28d115f038 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-400 dark:hover:bg-wp-background-400 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index a06eb41d9ee..f0f5c3fa222 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -71,7 +71,7 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
+              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -100,7 +100,7 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex items-center gap-2 border-2 hover:bg-wp-background-400 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
+              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
                 'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),

From d94945eebc3783612239267352634644b2ccf706 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 12:58:02 +0100
Subject: [PATCH 15/70] fix repo list bg color

---
 web/src/components/atomic/ListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 9ca2301e79d..9f92c31533f 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"

From cdbbb8e6615b87b76acc222ddc89ea9b219e11a2 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 13:00:15 +0100
Subject: [PATCH 16/70] add wp-background-500

---
 web/windi.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index 38afab6dac1..676ee6c29e6 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -132,6 +132,7 @@ export default defineConfig({
           200: 'var(--wp-background-200)',
           300: 'var(--wp-background-300)',
           400: 'var(--wp-background-400)',
+          500: 'var(--wp-background-500)',
         },
 
         'wp-text': {

From 700ba172076ebc64e58a98400416670fc2776f9b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 13:07:17 +0100
Subject: [PATCH 17/70] fix Header bg colors

---
 web/src/components/layout/scaffold/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index c9938d6d5fe..43d2526d1c9 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-400 dark:border-wp-background-200 bg-wp-background-200 dark:bg-wp-background-400 border-b-1 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">

From e080d7169498b92615b8be430648b1971d9da5d2 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 13:16:29 +0100
Subject: [PATCH 18/70] adjust hover bg classes

---
 web/src/components/atomic/ListItem.vue      | 2 +-
 web/src/components/layout/scaffold/Tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 9f92c31533f..f69805c019c 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 3055735445e..33a275a653a 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-200 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>

From b8918a8bf11f29c0ff1429f86915aac85f2eae84 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 14:17:39 +0100
Subject: [PATCH 19/70] adjust code-box colors

---
 web/src/components/atomic/CountBadge.vue      | 2 +-
 web/src/components/layout/scaffold/Header.vue | 2 +-
 web/src/style.css                             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 29c24ab4a28..05716971c9e 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block bg-wp-background-400 dark:bg-wp-background-200 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
+    class="inline-block bg-wp-code-100 dark:bg-wp-background-200 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 43d2526d1c9..ae86cd06275 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
+    class="border-wp-code-100 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/src/style.css b/web/src/style.css
index 11c54baf39b..c1b65d07891 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -145,7 +145,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
+  @apply bg-wp-code-100 p-4 rounded-md text-sm text-wp-text-100 break-words;
   white-space: pre-wrap;
 }
 

From fddcf4406475849f8e173b8b1e741c6a4bc61937 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:33:44 +0100
Subject: [PATCH 20/70] fix repo item background colors

---
 web/src/components/repo/RepoItem.vue             | 2 +-
 web/src/components/repo/pipeline/PipelineLog.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index f28d115f038..b0930788853 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-300 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 09fc3a7aac0..f44e4c2c061 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-200 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>

From a39154570f541e4589580fb2887f11654696ebe6 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:34:03 +0100
Subject: [PATCH 21/70] use distinct classes for inline boxes

---
 web/src/style.css   | 26 +++++++++++++++++++-------
 web/windi.config.ts |  2 +-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index c1b65d07891..75770b0aa87 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,9 +39,16 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-100: theme('colors.gray.200');
-  --wp-code-300: theme('colors.int-wp-secondary.300');
-  --wp-code-600: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-text-100: theme('colors.gray.600');
+
+  /* --wp-code-300: theme('colors.int-wp-secondary.300');
+  --wp-code-600: theme('colors.int-wp-secondary.600');  */
+
+  --wp-code-100: theme('colors.int-wp-secondary.300');
+  --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-300: theme('colors.int-wp-secondary.800');
+
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -90,8 +97,13 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-text-100: theme('colors.int-wp-secondary.800');
+
+  --wp-code-100: theme('colors.int-wp-secondary.300'); /* #383c4a */
+  --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
+  --wp-code-300: theme('colors.int-wp-secondary.800');
+
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -145,11 +157,11 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-100 p-4 rounded-md text-sm text-wp-text-100 break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-text-100 break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-100 px-1.5 py-0.5 rounded-md text-wp-text-100;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 px-1.5 py-0.5 rounded-md;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 676ee6c29e6..46e305c69b1 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -197,7 +197,7 @@ export default defineConfig({
         'wp-code': {
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',
-          300: 'var(--wp-code-100)',
+          300: 'var(--wp-code-300)',
         },
 
         'wp-code-text': {

From fa6bb0a982443e0cd0f1406084848f2e21c98c88 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:44:13 +0100
Subject: [PATCH 22/70] define code-inline in windi

---
 web/windi.config.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index 46e305c69b1..41a23f45c92 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -194,6 +194,14 @@ export default defineConfig({
           200: 'var(--wp-hint-warn-200)',
         },
 
+        'wp-code-inline': {
+          100: 'var(--wp-code-inline-100'
+        },
+
+        'wp-code-inline-text': {
+          100: 'var(--wp-code-inline-text-100'
+        },
+
         'wp-code': {
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',

From bb118c48737905541ff0dda9ea563c947829b23a Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:44:25 +0100
Subject: [PATCH 23/70] adjust panel bg color

---
 web/src/components/layout/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 3fea4972855..0a779713b96 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"

From 62a3f0175c5f3bd1059162e7a8f735836618cecc Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:44:36 +0100
Subject: [PATCH 24/70] use code-inline for badges

---
 web/src/components/atomic/CountBadge.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 05716971c9e..7bf2e6a178c 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block bg-wp-code-100 dark:bg-wp-background-200 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
+    class="bg-wp-code-inline-100 text-wp-text-code-inline-100 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
   >
     {{ value }}
   </span>

From 6bcdef09747b854ee28ffd4a39465aa0501b387a Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 23:52:33 +0100
Subject: [PATCH 25/70] close brackets

---
 web/src/components/layout/scaffold/Header.vue | 2 +-
 web/windi.config.ts                           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index ae86cd06275..43d2526d1c9 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-code-100 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 41a23f45c92..d67cd0d848b 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -195,11 +195,11 @@ export default defineConfig({
         },
 
         'wp-code-inline': {
-          100: 'var(--wp-code-inline-100'
+          100: 'var(--wp-code-inline-100)'
         },
 
         'wp-code-inline-text': {
-          100: 'var(--wp-code-inline-text-100'
+          100: 'var(--wp-code-inline-text-100)'
         },
 
         'wp-code': {

From 4daa11295384dc1ce66d1fdf7e1295b6e6ed8039 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 00:18:06 +0100
Subject: [PATCH 26/70] refine inlince code colors

---
 web/src/components/repo/pipeline/PipelineLog.vue | 2 +-
 web/src/style.css                                | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index f44e4c2c061..09fc3a7aac0 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-200 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
diff --git a/web/src/style.css b/web/src/style.css
index 75770b0aa87..a9851bc2338 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -97,14 +97,14 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-inline-100: theme('colors.gray.200');
-  --wp-code-inline-text-100: theme('colors.int-wp-secondary.800');
+  --wp-code-inline-100: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-text-100: theme('colors.gray.300');
 
   --wp-code-100: theme('colors.int-wp-secondary.300'); /* #383c4a */
   --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
   --wp-code-300: theme('colors.int-wp-secondary.800');
 
-  --wp-code-text-100: theme('colors.gray.300');
+  --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
   --wp-link-100: theme('colors.blue.400');
@@ -157,7 +157,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-text-100 break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
   white-space: pre-wrap;
 }
 

From b5870a7afbc2de9ce3ff9f392d284044771b1e31 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 00:34:46 +0100
Subject: [PATCH 27/70] use darker bg color for containers

---
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/pipeline/PipelineLog.vue         | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 web/src/style.css                                        | 4 ++--
 web/src/views/Login.vue                                  | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index f5a628cbdff..bafddadc7ae 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 09fc3a7aac0..7b6b76e4f50 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index f0f5c3fa222..3de1a55869b 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/style.css b/web/src/style.css
index a9851bc2338..fd97ef46a50 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -100,9 +100,9 @@
   --wp-code-inline-100: theme('colors.int-wp-secondary.600');
   --wp-code-inline-text-100: theme('colors.gray.300');
 
-  --wp-code-100: theme('colors.int-wp-secondary.300'); /* #383c4a */
+  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #383c4a */
   --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
-  --wp-code-300: theme('colors.int-wp-secondary.800');
+  --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
 
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 3720e5e32fa..f6561ea2c6a 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From 81f652122869a321b9225fd0710ccb191ee8c937 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 09:39:41 +0100
Subject: [PATCH 28/70] fix pipeline log upper bg

---
 web/src/components/repo/pipeline/PipelineLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 7b6b76e4f50..09fc3a7aac0 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -5,7 +5,7 @@
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-300 px-4 py-2">
+      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
         <span class="font-bold text-base text-wp-code-text-alt-100">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>

From 1f4bccffc28cf5fc269c22e28a74cde39bfa8a1e Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 09:41:56 +0100
Subject: [PATCH 29/70] fix inline code bg for dark

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index fd97ef46a50..c8fc2acdc20 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -97,7 +97,7 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-inline-100: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-100: theme('colors.int-wp-secondary.700');
   --wp-code-inline-text-100: theme('colors.gray.300');
 
   --wp-code-100: theme('colors.int-wp-secondary.700'); /* #383c4a */

From 0ac10862fea46f3dcb85f48edfb61c8e0a3acc9c Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 09:46:17 +0100
Subject: [PATCH 30/70] add darker bg color for hover

---
 web/src/components/atomic/CountBadge.vue | 2 +-
 web/src/style.css                        | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 7bf2e6a178c..23eaa1ed332 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="bg-wp-code-inline-100 text-wp-text-code-inline-100 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
+    class="bg-wp-code-inline-100 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/style.css b/web/src/style.css
index c8fc2acdc20..dbd4e1b45b7 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -40,6 +40,7 @@
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
   --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-200: theme('colors.gray.400');
   --wp-code-inline-text-100: theme('colors.gray.600');
 
   /* --wp-code-300: theme('colors.int-wp-secondary.300');
@@ -98,6 +99,7 @@
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
   --wp-code-inline-100: theme('colors.int-wp-secondary.700');
+  --wp-code-inline-100: theme('colors.int-wp-secondary.800');
   --wp-code-inline-text-100: theme('colors.gray.300');
 
   --wp-code-100: theme('colors.int-wp-secondary.700'); /* #383c4a */

From 154c339bab17d28a787c2ba82e568e87a52ebb1e Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 09:56:17 +0100
Subject: [PATCH 31/70] darken hover bg color

---
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index bafddadc7ae..49040f6f98a 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index b0930788853..bf02dd6411f 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 3de1a55869b..c026f741197 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -71,7 +71,7 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 px-1 py-2 rounded-md hover-effect"
+              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 px-1 py-2 rounded-md hover-effect"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -100,7 +100,7 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-500 p-2 border-transparent rounded-md w-full hover-effect"
+              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
                 'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),

From 45764476ac782918e816e1017a97990f5b8f576e Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:00:19 +0100
Subject: [PATCH 32/70] fix badge count bg color

---
 web/src/components/atomic/CountBadge.vue | 2 +-
 web/src/style.css                        | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 23eaa1ed332..f66896e2799 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="bg-wp-code-inline-100 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
+    class="bg-wp-code-inline-400 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/style.css b/web/src/style.css
index dbd4e1b45b7..07401039722 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -63,6 +63,7 @@
   --wp-background-300: theme('colors.int-wp-secondary.300');
   --wp-background-400: theme('colors.int-wp-secondary.400');
   --wp-background-500: theme('colors.int-wp-secondary.500');
+  --wp-background-600: theme('colors.int-wp-secondary.600');
 
   --wp-text-100: theme('colors.gray.300');
   --wp-text-200: theme('colors.gray.200');
@@ -102,9 +103,10 @@
   --wp-code-inline-100: theme('colors.int-wp-secondary.800');
   --wp-code-inline-text-100: theme('colors.gray.300');
 
-  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #383c4a */
+  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #222631 */
   --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
   --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
+  --wp-code-400: theme('colors.int-wp-secondary.300'); /* #383c4a */
 
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');

From 5d697b9eb3257a757f6f0cd13ccdf900adf42e5f Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:00:58 +0100
Subject: [PATCH 33/70] darken code box bg

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index 07401039722..78041ede14b 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -161,7 +161,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
+  @apply bg-wp-code-300 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
   white-space: pre-wrap;
 }
 

From 3181ddb4031d9dcdce419c7cbedd40ad4eb981b9 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:04:49 +0100
Subject: [PATCH 34/70] format

---
 web/windi.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index d67cd0d848b..c35f550eb6f 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -195,11 +195,11 @@ export default defineConfig({
         },
 
         'wp-code-inline': {
-          100: 'var(--wp-code-inline-100)'
+          100: 'var(--wp-code-inline-100)',
         },
 
         'wp-code-inline-text': {
-          100: 'var(--wp-code-inline-text-100)'
+          100: 'var(--wp-code-inline-text-100)',
         },
 
         'wp-code': {

From 337f6ee4e178ec6e5a2d34998c0d1d33ed8d2cab Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:08:03 +0100
Subject: [PATCH 35/70] add missing windi colors

---
 web/windi.config.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index c35f550eb6f..6c8498d1e0e 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -133,6 +133,7 @@ export default defineConfig({
           300: 'var(--wp-background-300)',
           400: 'var(--wp-background-400)',
           500: 'var(--wp-background-500)',
+          600: 'var(--wp-background-600)',
         },
 
         'wp-text': {
@@ -206,6 +207,7 @@ export default defineConfig({
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',
           300: 'var(--wp-code-300)',
+          400: 'var(--wp-code-400)',
         },
 
         'wp-code-text': {

From 2e2491f119b037821ab7b97c7fb782a196c3c8e1 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:11:12 +0100
Subject: [PATCH 36/70] darken border color

---
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/layout/Panel.vue                      | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 web/src/views/Login.vue                                  | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index f69805c019c..f7582482b1a 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-600 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 0a779713b96..43b60ff3481 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 49040f6f98a..3916f6b8a77 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index bf02dd6411f..dd8170a5379 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-600 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index c026f741197..31297f135fc 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index f6561ea2c6a..8ac5aa0cd2c 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From b40f0c750505d2813bad2dc98e08dff91da9c92e Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:27:00 +0100
Subject: [PATCH 37/70] background

---
 web/src/components/atomic/CountBadge.vue              | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue | 2 +-
 web/src/style.css                                     | 5 +++--
 web/windi.config.ts                                   | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index f66896e2799..f1b40b3ce35 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="bg-wp-code-inline-400 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
+    class="bg-wp-code-inline-200 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 31297f135fc..5dd4d2a5790 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/style.css b/web/src/style.css
index 78041ede14b..bb4aa044df9 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -41,6 +41,7 @@
 
   --wp-code-inline-100: theme('colors.gray.200');
   --wp-code-inline-200: theme('colors.gray.400');
+
   --wp-code-inline-text-100: theme('colors.gray.600');
 
   /* --wp-code-300: theme('colors.int-wp-secondary.300');
@@ -100,13 +101,13 @@
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
   --wp-code-inline-100: theme('colors.int-wp-secondary.700');
-  --wp-code-inline-100: theme('colors.int-wp-secondary.800');
+  --wp-code-inline-200: theme('colors.int-wp-secondary.300');
+
   --wp-code-inline-text-100: theme('colors.gray.300');
 
   --wp-code-100: theme('colors.int-wp-secondary.700'); /* #222631 */
   --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
   --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
-  --wp-code-400: theme('colors.int-wp-secondary.300'); /* #383c4a */
 
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 6c8498d1e0e..244ce8fff3f 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -197,6 +197,7 @@ export default defineConfig({
 
         'wp-code-inline': {
           100: 'var(--wp-code-inline-100)',
+          200: 'var(--wp-code-inline-200)',
         },
 
         'wp-code-inline-text': {
@@ -207,7 +208,6 @@ export default defineConfig({
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',
           300: 'var(--wp-code-300)',
-          400: 'var(--wp-code-400)',
         },
 
         'wp-code-text': {

From f65262eb55d87eae5187177c9ab8a07567c8fd24 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:32:01 +0100
Subject: [PATCH 38/70] bg 600 -> 400

---
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/layout/Panel.vue                      | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 2 +-
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue    | 2 +-
 web/src/views/Login.vue                                  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index f7582482b1a..f69805c019c 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-600 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 43b60ff3481..0a779713b96 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 3916f6b8a77..49040f6f98a 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index dd8170a5379..bf02dd6411f 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-600 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 5dd4d2a5790..c026f741197 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 8ac5aa0cd2c..f6561ea2c6a 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-600 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From 252b6aec4537ade23e697cabe67f4eedd4d20336 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:39:52 +0100
Subject: [PATCH 39/70] remap wp-background to secondary

---
 web/windi.config.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index 244ce8fff3f..bb33c30b46b 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -128,12 +128,12 @@ export default defineConfig({
 
         // Theme colors
         'wp-background': {
-          100: 'var(--wp-background-100)',
-          200: 'var(--wp-background-200)',
-          300: 'var(--wp-background-300)',
-          400: 'var(--wp-background-400)',
-          500: 'var(--wp-background-500)',
-          600: 'var(--wp-background-600)',
+          100: 'var(--wp-secondary-100)',
+          200: 'var(--wp-secondary-200)',
+          300: 'var(--wp-secondary-300)',
+          400: 'var(--wp-secondary-400)',
+          500: 'var(--wp-secondary-500)',
+          600: 'var(--wp-secondary-600)',
         },
 
         'wp-text': {

From d23f5385bbf78a82d174c75946d4c7c5db8398e6 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 10:49:43 +0100
Subject: [PATCH 40/70] .

---
 web/windi.config.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index bb33c30b46b..244ce8fff3f 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -128,12 +128,12 @@ export default defineConfig({
 
         // Theme colors
         'wp-background': {
-          100: 'var(--wp-secondary-100)',
-          200: 'var(--wp-secondary-200)',
-          300: 'var(--wp-secondary-300)',
-          400: 'var(--wp-secondary-400)',
-          500: 'var(--wp-secondary-500)',
-          600: 'var(--wp-secondary-600)',
+          100: 'var(--wp-background-100)',
+          200: 'var(--wp-background-200)',
+          300: 'var(--wp-background-300)',
+          400: 'var(--wp-background-400)',
+          500: 'var(--wp-background-500)',
+          600: 'var(--wp-background-600)',
         },
 
         'wp-text': {

From 220f5d77b33ff3e8e27ae80d1c1bbaab5f3ff63c Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:02:19 +0100
Subject: [PATCH 41/70] darken hover bg

---
 .pre-commit-config.yaml                     | 4 ++--
 web/src/components/atomic/ListItem.vue      | 2 +-
 web/src/components/layout/scaffold/Tabs.vue | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 0745023636d..08aecc18afa 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -27,8 +27,8 @@ repos:
     rev: v2.13.1-beta
     hooks:
       - id: hadolint
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
+  - repo: https://github.com//rbubley/mirrors-prettier
+    rev: v3.4.2
     hooks:
       - id: prettier
   - repo: https://github.com/adrienverge/yamllint.git
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index f69805c019c..268a868b7a3 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -4,7 +4,7 @@
     :to="to"
     class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 33a275a653a..4e26886c854 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-500 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>

From b44a7cfe0d5f8230d7bad243ef7ca8cc4e28ad46 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:15:31 +0100
Subject: [PATCH 42/70] darken navbar border color

---
 web/src/components/layout/header/Navbar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 0fcd66e6ebc..3c740c66182 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex border-wp-background-200 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
+    class="flex border-wp-background-300 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">

From 0e4d9461127e4743701d1eb161f4f212d32c6077 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:20:10 +0100
Subject: [PATCH 43/70] adjust light bade counter bg

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index bb4aa044df9..32fa9438c92 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -40,7 +40,7 @@
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
   --wp-code-inline-100: theme('colors.gray.200');
-  --wp-code-inline-200: theme('colors.gray.400');
+  --wp-code-inline-200: theme('colors.gray.200');
 
   --wp-code-inline-text-100: theme('colors.gray.600');
 

From 573b306c5825e50f749b0c92fa899c15ec4d81c3 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:23:03 +0100
Subject: [PATCH 44/70] adjust hover dark

---
 web/src/components/atomic/ListItem.vue      | 2 +-
 web/src/components/layout/scaffold/Tabs.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 268a868b7a3..f69805c019c 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -4,7 +4,7 @@
     :to="to"
     class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 4e26886c854..33a275a653a 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-500 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>

From aa5a2a72dc1514aa2a7807a9903c69240491a2ca Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:31:21 +0100
Subject: [PATCH 45/70] repolist item hover

---
 web/src/components/atomic/ListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index f69805c019c..268a868b7a3 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -4,7 +4,7 @@
     :to="to"
     class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
     }"
   >
     <slot />

From 0ff7abcfccdfdc1435c0cd32caefac17a84adc45 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:37:15 +0100
Subject: [PATCH 46/70] lighten light code bg

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index 32fa9438c92..98baa0c97d9 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -49,7 +49,7 @@
 
   --wp-code-100: theme('colors.int-wp-secondary.300');
   --wp-code-200: theme('colors.int-wp-secondary.600');
-  --wp-code-300: theme('colors.int-wp-secondary.800');
+  --wp-code-300: theme('colors.int-wp-secondary.600');
 
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');

From 533eaa685ebb7e5ce33300653078c3079f3bf291 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 11:53:17 +0100
Subject: [PATCH 47/70] lighter default bg

---
 web/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 8ade35df027..b7a2503d6af 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-wp-background-300 dark:bg-wp-background-300 m-auto w-full h-full app">
+  <div class="flex flex-col bg-wp-background-200 dark:bg-wp-background-300 m-auto w-full h-full app">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />

From ad485a560f6cc0fb24b9ef0754652fc66b11cb12 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:01:32 +0100
Subject: [PATCH 48/70] adjust hover light

---
 web/src/components/layout/scaffold/Tabs.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 33a275a653a..55a91be9b52 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-300 px-2 py-1 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-200 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>

From d8b3dda6a39427975f6ba08599b65399016907af Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:03:00 +0100
Subject: [PATCH 49/70] adjust panel bg

---
 web/src/components/layout/Panel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 0a779713b96..f3e15aca7b8 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"

From 1cb006844dbfb838b5c7e77536e13cc4be36658b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:09:38 +0100
Subject: [PATCH 50/70] bg 100

---
 web/src/components/repo/pipeline/PipelineStepList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index c026f741197..ab7f0de223d 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">

From 6fcfd0d5d6da10fa2d64b4df0cfbd12da45c23ba Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:12:15 +0100
Subject: [PATCH 51/70] lighten forced codebox bg color

---
 web/src/components/agent/AgentList.vue       | 2 +-
 web/src/components/registry/RegistryList.vue | 2 +-
 web/src/components/secrets/SecretList.vue    | 2 +-
 web/src/views/admin/AdminOrgs.vue            | 2 +-
 web/src/views/admin/AdminQueue.vue           | 2 +-
 web/src/views/admin/AdminRepos.vue           | 2 +-
 web/src/views/admin/AdminUsers.vue           | 2 +-
 web/src/views/repo/settings/Crons.vue        | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 20e65032646..254107efafd 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
diff --git a/web/src/components/registry/RegistryList.vue b/web/src/components/registry/RegistryList.vue
index 97fc12db81f..1dd7d13b2a2 100644
--- a/web/src/components/registry/RegistryList.vue
+++ b/web/src/components/registry/RegistryList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
     >
       <span>{{ registry.address }}</span>
       <IconButton
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index c48384e9f03..77be9948a4e 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
     >
       <span>{{ secret.name }}</span>
       <Badge
diff --git a/web/src/views/admin/AdminOrgs.vue b/web/src/views/admin/AdminOrgs.vue
index 9de3e096b79..d6f65ac6c5a 100644
--- a/web/src/views/admin/AdminOrgs.vue
+++ b/web/src/views/admin/AdminOrgs.vue
@@ -4,7 +4,7 @@
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
       >
         <span>{{ org.name }}</span>
         <IconButton
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index e2bd7e4a2d1..80e46425247 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -29,7 +29,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="items-center !bg-wp-background-300 !dark:bg-wp-background-200 mb-2"
+          class="items-center !bg-wp-background-200 !dark:bg-wp-background-200 mb-2"
         >
           <div
             class="flex items-center"
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index a108a5860d2..ad928a0b0d8 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -13,7 +13,7 @@
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
       >
         <span>{{ repo.full_name }}</span>
         <div class="flex items-center ml-auto">
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index f1a13bc772e..f2efd0011ca 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -14,7 +14,7 @@
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="items-center gap-2 !bg-wp-background-300 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
       >
         <img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
diff --git a/web/src/views/repo/settings/Crons.vue b/web/src/views/repo/settings/Crons.vue
index 9e0c41e8d19..380c7d5cf1f 100644
--- a/web/src/views/repo/settings/Crons.vue
+++ b/web/src/views/repo/settings/Crons.vue
@@ -18,7 +18,7 @@
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="items-center !bg-wp-background-300 !dark:bg-wp-background-200"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
       >
         <span class="grid grid-cols-3 w-full">
           <span>{{ cron.name }}</span>

From a95a598e69cceb10ca5e3db197cd8f6054c3a58b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:13:02 +0100
Subject: [PATCH 52/70] darken forced dark bg color

---
 web/src/components/agent/AgentList.vue       | 2 +-
 web/src/components/registry/RegistryList.vue | 2 +-
 web/src/components/secrets/SecretList.vue    | 2 +-
 web/src/views/admin/AdminOrgs.vue            | 2 +-
 web/src/views/admin/AdminQueue.vue           | 2 +-
 web/src/views/admin/AdminRepos.vue           | 2 +-
 web/src/views/admin/AdminUsers.vue           | 2 +-
 web/src/views/repo/settings/Crons.vue        | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 254107efafd..2e030319516 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
diff --git a/web/src/components/registry/RegistryList.vue b/web/src/components/registry/RegistryList.vue
index 1dd7d13b2a2..2fe0794f68a 100644
--- a/web/src/components/registry/RegistryList.vue
+++ b/web/src/components/registry/RegistryList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
     >
       <span>{{ registry.address }}</span>
       <IconButton
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index 77be9948a4e..b857f9828ca 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
     >
       <span>{{ secret.name }}</span>
       <Badge
diff --git a/web/src/views/admin/AdminOrgs.vue b/web/src/views/admin/AdminOrgs.vue
index d6f65ac6c5a..42f90144c67 100644
--- a/web/src/views/admin/AdminOrgs.vue
+++ b/web/src/views/admin/AdminOrgs.vue
@@ -4,7 +4,7 @@
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
       >
         <span>{{ org.name }}</span>
         <IconButton
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index 80e46425247..9e56a5eadb6 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -29,7 +29,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="items-center !bg-wp-background-200 !dark:bg-wp-background-200 mb-2"
+          class="items-center !bg-wp-background-200 !dark:bg-wp-background-300 mb-2"
         >
           <div
             class="flex items-center"
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index ad928a0b0d8..8cf09bad9c2 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -13,7 +13,7 @@
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
       >
         <span>{{ repo.full_name }}</span>
         <div class="flex items-center ml-auto">
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index f2efd0011ca..6de727084df 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -14,7 +14,7 @@
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-200"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
       >
         <img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
diff --git a/web/src/views/repo/settings/Crons.vue b/web/src/views/repo/settings/Crons.vue
index 380c7d5cf1f..f4cbbe92ed3 100644
--- a/web/src/views/repo/settings/Crons.vue
+++ b/web/src/views/repo/settings/Crons.vue
@@ -18,7 +18,7 @@
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="items-center !bg-wp-background-200 !dark:bg-wp-background-200"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
       >
         <span class="grid grid-cols-3 w-full">
           <span>{{ cron.name }}</span>

From a76f2da28c8adab4d8fe9668237f6516c07974b8 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:24:09 +0100
Subject: [PATCH 53/70] adjust adminqueuestats

---
 web/src/components/admin/settings/queue/AdminQueueStats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 8dac18cd6e9..1583a1cc940 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="border-wp-background-400 bg-wp-background-300 dark:bg-wp-background-200 px-5 py-5 border rounded-md w-full text-wp-text-100"
+      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
         <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">

From e7f61008c772b4065dac20c048ab724c7a3b0e22 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sun, 22 Dec 2024 12:39:40 +0100
Subject: [PATCH 54/70] adjust all border colors

---
 web/src/components/admin/settings/queue/AdminQueueStats.vue | 2 +-
 web/src/components/atomic/ListItem.vue                      | 2 +-
 web/src/components/layout/Panel.vue                         | 2 +-
 web/src/components/layout/scaffold/Header.vue               | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue    | 4 ++--
 web/src/components/repo/RepoItem.vue                        | 2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue       | 4 ++--
 web/src/views/Login.vue                                     | 2 +-
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 1583a1cc940..3d4b683c1ff 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
+      class="border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
         <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 268a868b7a3..edabdab2691 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
     }"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index f3e15aca7b8..3b45bc3b4a0 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 43d2526d1c9..0ac50eebb79 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
+    class="border-wp-background-600 dark:border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 49040f6f98a..73f2b5ffeb7 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-600 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index bf02dd6411f..9b063d78872 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-600 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index ab7f0de223d..5c8f29a7ea1 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
+          class="border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index f6561ea2c6a..0e01a3275f3 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From bbf5d082652622084183c0d4b3e2cfdb82336f2f Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 13:04:51 +0100
Subject: [PATCH 55/70] fix repo item light

---
 web/src/components/repo/RepoItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 9b063d78872..64d3ac7272d 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-600 bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>

From dc5133693113a48874debead9f11947c36e75102 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 13:06:05 +0100
Subject: [PATCH 56/70] border 600 -> 400

---
 web/src/components/admin/settings/queue/AdminQueueStats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 3d4b683c1ff..1583a1cc940 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
+      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
         <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">

From 02eb394b8ecb659f92b79ceddb5c4b48c9a6e69b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 13:06:17 +0100
Subject: [PATCH 57/70] border 600 -> 400

---
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/layout/Panel.vue                      | 2 +-
 web/src/components/layout/scaffold/Header.vue            | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 4 ++--
 web/src/components/repo/pipeline/PipelineStepList.vue    | 4 ++--
 web/src/views/Login.vue                                  | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index edabdab2691..268a868b7a3 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
     :class="{
       'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
     }"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 3b45bc3b4a0..f3e15aca7b8 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 0ac50eebb79..43d2526d1c9 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-600 dark:border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 73f2b5ffeb7..49040f6f98a 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-600 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 27bb1f4ccf4..d564f28d508 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-600 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0e01a3275f3..f6561ea2c6a 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-600 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />

From de7c065d818321e351c594c76a72502b2c9a8698 Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 22:01:56 +0100
Subject: [PATCH 58/70] Update
 web/src/components/admin/settings/queue/AdminQueueStats.vue

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
---
 web/src/components/admin/settings/queue/AdminQueueStats.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 1583a1cc940..5aa0fbda30c 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
+      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
         <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">

From ebf5879f45cbaf050eb106f48fa0ff5206cf1a8d Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 22:10:22 +0100
Subject: [PATCH 59/70] Update
 web/src/components/repo/pipeline/PipelineStepList.vue

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
---
 web/src/components/repo/pipeline/PipelineStepList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index d564f28d508..c19aa7ac427 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -104,7 +104,7 @@
               :title="step.name"
               class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
-                'bg-wp-background-400 dark:bg-wp-background-500': selectedStepId && selectedStepId === step.pid,
+                'bg-wp-background-400 dark:bg-wp-background-600': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"

From 6ba80148770943f0917cedcd5d7f4c56b73ea4ed Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 22:10:38 +0100
Subject: [PATCH 60/70] Update web/src/components/layout/Settings.vue

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
---
 web/src/components/layout/Settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
index b5c50859913..0a4e2597553 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <Panel>
-    <div class="flex flex-col justify-center dark:border-wp-background-200 mb-4 pb-4 border-b">
+    <div class="flex flex-col justify-center dark:border-wp-background-100 mb-4 pb-4 border-b">
       <div class="flex justify-between items-center">
         <h1 class="flex items-center gap-1 text-wp-text-100 text-xl">
           {{ title }}

From 26380934b14244bc5e25af220058c2d351d505c2 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Thu, 26 Dec 2024 22:09:55 +0100
Subject: [PATCH 61/70] also apply new code colors to code-box

---
 web/src/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/style.css b/web/src/style.css
index 98baa0c97d9..69ae1c65b6c 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -162,7 +162,7 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-300 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 p-4 rounded-md text-sm break-words;
   white-space: pre-wrap;
 }
 

From f32a4bea2a18aa7f43b1014b71a8926e4def5037 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Fri, 27 Dec 2024 15:16:46 +0100
Subject: [PATCH 62/70] add code-box-log class

---
 web/src/components/repo/pipeline/PipelineLog.vue | 2 +-
 web/src/style.css                                | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 09fc3a7aac0..e8196fd5ac3 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box"
+      class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box-log"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
diff --git a/web/src/style.css b/web/src/style.css
index 69ae1c65b6c..c88043557b8 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -170,3 +170,8 @@ body,
 code:not(pre > code) {
   @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 px-1.5 py-0.5 rounded-md;
 }
+
+.code-box-log {
+  @apply bg-wp-code-300 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
+  white-space: pre-wrap;
+}

From 59ecba1f569de7cdfc3239dd1da1fbee35bd436f Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Fri, 27 Dec 2024 17:48:55 +0100
Subject: [PATCH 63/70] revert bg and border color changes

---
 web/src/App.vue                                        |  2 +-
 .../admin/settings/queue/AdminQueueStats.vue           |  2 +-
 web/src/components/agent/AgentList.vue                 |  2 +-
 web/src/components/atomic/CountBadge.vue               |  2 +-
 web/src/components/atomic/ListItem.vue                 |  4 ++--
 web/src/components/form/TextField.vue                  |  2 +-
 web/src/components/layout/Panel.vue                    |  2 +-
 web/src/components/layout/header/Navbar.vue            |  2 +-
 web/src/components/layout/scaffold/Header.vue          |  2 +-
 web/src/components/layout/scaffold/Tabs.vue            |  2 +-
 .../components/pipeline-feed/PipelineFeedSidebar.vue   |  2 +-
 web/src/components/registry/RegistryList.vue           |  2 +-
 web/src/components/repo/RepoItem.vue                   |  2 +-
 web/src/components/repo/pipeline/PipelineStepList.vue  | 10 +++++-----
 web/src/components/secrets/SecretList.vue              |  2 +-
 web/src/style.css                                      | 10 ++++------
 web/src/views/Login.vue                                |  2 +-
 web/src/views/admin/AdminOrgs.vue                      |  2 +-
 web/src/views/admin/AdminQueue.vue                     |  2 +-
 web/src/views/admin/AdminRepos.vue                     |  2 +-
 web/src/views/admin/AdminUsers.vue                     |  2 +-
 web/src/views/repo/settings/Crons.vue                  |  2 +-
 22 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index b7a2503d6af..f0ef3a16e28 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col bg-wp-background-200 dark:bg-wp-background-300 m-auto w-full h-full app">
+  <div class="flex flex-col bg-wp-background-200 dark:bg-wp-background-100 m-auto w-full h-full app">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 5aa0fbda30c..e207265810d 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-300 px-5 py-5 border rounded-md w-full text-wp-text-100"
+      class="border-wp-background-300 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
         <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">
diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 2e030319516..92f555550b9 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
+      class="items-center !bg-wp-background-100 !dark:bg-wp-background-200"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index f1b40b3ce35..aca5d976c29 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="bg-wp-code-inline-200 text-wp-text-code-inline-100 hover:bg-wp-code-inline-200 inline-block px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-xs leading-4"
+    class="inline-block bg-wp-background-300 dark:bg-wp-background-100 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 268a868b7a3..397ac2d5a70 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,9 +2,9 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md w-full overflow-hidden"
+    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 p-4 border rounded-md w-full overflow-hidden"
     :class="{
-      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-500': clickable || to,
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index 8f9d2bda205..f3e42e49858 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-100 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index f3e15aca7b8..89e41390f5b 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 3c740c66182..8352d4dddf2 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="flex border-wp-background-300 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
+    class="flex border-wp-background-100 bg-wp-primary-200 dark:bg-wp-primary-300 p-4 border-b font-bold text-neutral-content text-wp-primary-text-100"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index 43d2526d1c9..ea644bfb5bc 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <header
-    class="border-wp-background-400 dark:border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-500 border-b-1 text-wp-text-100"
+    class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-300 border-b-1 text-wp-text-100"
     :class="{ 'md:px-4': fullWidth }"
   >
     <Container :full-width="fullWidth" class="!py-0">
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 55a91be9b52..46a0d0b4885 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-300 hover:bg-wp-background-200 px-2 py-1 rounded-md w-full min-w-20"
+        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 px-2 py-1 rounded-md w-full min-w-20"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 49040f6f98a..c298cbaa3d5 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 overflow-y-auto"
+    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
diff --git a/web/src/components/registry/RegistryList.vue b/web/src/components/registry/RegistryList.vue
index 2fe0794f68a..775a02eb4d2 100644
--- a/web/src/components/registry/RegistryList.vue
+++ b/web/src/components/registry/RegistryList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
     >
       <span>{{ registry.address }}</span>
       <IconButton
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 64d3ac7272d..6979a28ff29 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 dark:bg-wp-background-400 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="flex flex-col border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-200 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
   >
     <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
       <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index c19aa7ac427..ba44d8cf916 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-400 p-4 border rounded-md"
+      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 p-4 border rounded-md"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -59,7 +59,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow p-2 border rounded-md"
         >
           <div class="flex flex-col gap-2">
             <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
@@ -71,7 +71,7 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 px-1 py-2 rounded-md hover-effect"
+              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 px-1 py-2 rounded-md hover-effect"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -102,9 +102,9 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 p-2 border-transparent rounded-md w-full hover-effect"
+              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 p-2 border-transparent rounded-md w-full hover-effect"
               :class="{
-                'bg-wp-background-400 dark:bg-wp-background-600': selectedStepId && selectedStepId === step.pid,
+                'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index b857f9828ca..3201453d2f4 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
     >
       <span>{{ secret.name }}</span>
       <Badge
diff --git a/web/src/style.css b/web/src/style.css
index c88043557b8..d4900e7b7a5 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -59,12 +59,10 @@
 }
 
 :root[data-theme='dark'] {
-  --wp-background-100: theme('colors.black');
-  --wp-background-200: theme('colors.int-wp-secondary.200');
-  --wp-background-300: theme('colors.int-wp-secondary.300');
-  --wp-background-400: theme('colors.int-wp-secondary.400');
-  --wp-background-500: theme('colors.int-wp-secondary.500');
-  --wp-background-600: theme('colors.int-wp-secondary.600');
+  --wp-background-100: theme('colors.int-wp-secondary.300');
+  --wp-background-200: theme('colors.int-wp-secondary.400');
+  --wp-background-300: theme('colors.int-wp-secondary.500');
+  --wp-background-400: theme('colors.int-wp-secondary.600');
 
   --wp-text-100: theme('colors.gray.300');
   --wp-text-200: theme('colors.gray.200');
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index f6561ea2c6a..cb6c0ab33f6 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-400 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
     >
       <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />
diff --git a/web/src/views/admin/AdminOrgs.vue b/web/src/views/admin/AdminOrgs.vue
index 42f90144c67..2ce9e3f8032 100644
--- a/web/src/views/admin/AdminOrgs.vue
+++ b/web/src/views/admin/AdminOrgs.vue
@@ -4,7 +4,7 @@
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
       >
         <span>{{ org.name }}</span>
         <IconButton
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index 9e56a5eadb6..a644de7893c 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -29,7 +29,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="items-center !bg-wp-background-200 !dark:bg-wp-background-300 mb-2"
+          class="items-center !bg-wp-background-200 !dark:bg-wp-background-100 mb-2"
         >
           <div
             class="flex items-center"
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index 8cf09bad9c2..d44f4ba7753 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -13,7 +13,7 @@
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
       >
         <span>{{ repo.full_name }}</span>
         <div class="flex items-center ml-auto">
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index 6de727084df..09ca5883db9 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -14,7 +14,7 @@
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-300"
+        class="items-center gap-2 !bg-wp-background-200 !dark:bg-wp-background-100"
       >
         <img v-if="user.avatar_url" class="rounded-md h-6" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
diff --git a/web/src/views/repo/settings/Crons.vue b/web/src/views/repo/settings/Crons.vue
index f4cbbe92ed3..e9e354803d6 100644
--- a/web/src/views/repo/settings/Crons.vue
+++ b/web/src/views/repo/settings/Crons.vue
@@ -18,7 +18,7 @@
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="items-center !bg-wp-background-200 !dark:bg-wp-background-300"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
       >
         <span class="grid grid-cols-3 w-full">
           <span>{{ cron.name }}</span>

From ba156456221a39258448fe281030a1df397655eb Mon Sep 17 00:00:00 2001
From: Patrick Schratz <patrick.schratz@gmail.com>
Date: Fri, 27 Dec 2024 22:54:13 +0100
Subject: [PATCH 64/70] Update web/src/style.css

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
---
 web/src/style.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index d4900e7b7a5..28f3d822c66 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -44,9 +44,6 @@
 
   --wp-code-inline-text-100: theme('colors.gray.600');
 
-  /* --wp-code-300: theme('colors.int-wp-secondary.300');
-  --wp-code-600: theme('colors.int-wp-secondary.600');  */
-
   --wp-code-100: theme('colors.int-wp-secondary.300');
   --wp-code-200: theme('colors.int-wp-secondary.600');
   --wp-code-300: theme('colors.int-wp-secondary.600');

From 746e9c8824ff5d68d01c8136f19d3f84d29a38a7 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:06:35 +0100
Subject: [PATCH 65/70] apply prettier

---
 web/src/App.vue                               |  6 ++--
 web/src/components/agent/AgentList.vue        |  2 +-
 web/src/components/atomic/CountBadge.vue      |  2 +-
 web/src/components/atomic/ListItem.vue        |  2 +-
 web/src/components/form/InputField.vue        |  8 ++---
 web/src/components/form/TextField.vue         |  4 +--
 web/src/components/layout/Panel.vue           | 10 +++---
 web/src/components/layout/Settings.vue        | 10 +++---
 web/src/components/layout/scaffold/Tabs.vue   |  6 ++--
 .../pipeline-feed/PipelineFeedSidebar.vue     |  6 ++--
 web/src/components/repo/RepoItem.vue          | 16 +++++-----
 .../components/repo/pipeline/PipelineLog.vue  | 24 +++++++-------
 .../repo/pipeline/PipelineStepList.vue        | 32 +++++++++----------
 web/src/style.css                             |  6 ++--
 web/src/views/Login.vue                       | 14 ++++----
 15 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index f0ef3a16e28..9b856bbecd5 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex flex-col bg-wp-background-200 dark:bg-wp-background-100 m-auto w-full h-full app">
+  <div class="bg-wp-background-200 dark:bg-wp-background-100 app m-auto flex h-full w-full flex-col">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
       <main class="relative flex h-full min-h-0">
-        <div id="scroll-component" class="flex flex-col flex-grow overflow-y-auto">
+        <div id="scroll-component" class="flex flex-grow flex-col overflow-y-auto">
           <router-view />
         </div>
         <transition name="slide-right">
-          <PipelineFeedSidebar class="top-0 right-0 bottom-0 absolute shadow-md border-l w-full max-w-80 xl:max-w-96" />
+          <PipelineFeedSidebar class="absolute bottom-0 right-0 top-0 w-full max-w-80 border-l shadow-md xl:max-w-96" />
         </transition>
       </main>
     </template>
diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index e96704d232b..0d4f4c11ef4 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-100 !dark:bg-wp-background-200"
+      class="!bg-wp-background-100 !dark:bg-wp-background-200 items-center"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index aca5d976c29..6a6fb14282f 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block bg-wp-background-300 dark:bg-wp-background-100 px-1.5 py-0.5 rounded-full min-w-5 font-bold text-center text-wp-text-100 text-xs leading-4"
+    class="bg-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 inline-block min-w-5 rounded-full px-1.5 py-0.5 text-center text-xs font-bold leading-4"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index cd4a00303f4..3b4c2c52ed9 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 p-4 border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex w-full overflow-hidden rounded-md border p-4"
     :class="{
       'hover:bg-wp-background-300 dark:hover:bg-wp-background-300 cursor-pointer hover:shadow-md': clickable || to,
     }"
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 1239af55b91..58073ee831f 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center mb-2">
-      <label class="font-bold text-wp-text-100" :for="id" v-bind="$attrs">{{ label }}</label>
+  <div class="mb-4 mt-2 flex flex-col">
+    <div class="mb-2 flex items-center">
+      <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
     <slot :id="id" />
-    <div v-if="$slots.description" class="mt-1 ml-1 text-wp-text-alt-100">
+    <div v-if="$slots.description" class="text-wp-text-alt-100 ml-1 mt-1">
       <slot name="description" />
     </div>
   </div>
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index f3e42e49858..efc6c86c2d2 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-100 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-100 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 px-2 py-1 border rounded-md w-full focus-visible:outline-none"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 305723b317c..8ce3c300ac1 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex gap-2 bg-wp-background-400 px-4 py-2 w-full font-bold text-wp-text-100"
+      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="min-w-6 h-6 transition-transform duration-150"
-        :class="{ 'transform rotate-90': !collapsed }"
+        class="h-6 min-w-6 transition-transform duration-150"
+        :class="{ 'rotate-90 transform': !collapsed }"
       />
       {{ title }}
     </component>
@@ -25,7 +25,7 @@
       class="transition-height overflow-hidden duration-150"
     >
       <<<<<<< HEAD
-      <div class="p-4 w-full text-wp-text-100">
+      <div class="text-wp-text-100 w-full p-4">
         =======
         <div class="text-wp-text-100 w-full p-4">
           >>>>>>> main
diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
index 0a4e2597553..12666f90d04 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -1,16 +1,16 @@
 <template>
   <Panel>
-    <div class="flex flex-col justify-center dark:border-wp-background-100 mb-4 pb-4 border-b">
-      <div class="flex justify-between items-center">
-        <h1 class="flex items-center gap-1 text-wp-text-100 text-xl">
+    <div class="dark:border-wp-background-100 mb-4 flex flex-col justify-center border-b pb-4">
+      <div class="flex items-center justify-between">
+        <h1 class="text-wp-text-100 flex items-center gap-1 text-xl">
           {{ title }}
           <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
         </h1>
         <slot v-if="$slots.titleActions" name="titleActions" />
       </div>
 
-      <div class="flex flex-wrap justify-between items-center gap-x-4 gap-y-2">
-        <p v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</p>
+      <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+        <p v-if="description" class="text-wp-text-alt-100 text-sm">{{ description }}</p>
         <div v-if="$slots.headerActions">
           <slot name="headerActions" />
         </div>
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 46a0d0b4885..6579d10a9ba 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="flex flex-wrap md:gap-4 mt-2">
+  <div class="mt-2 flex flex-wrap md:gap-4">
     <router-link
       v-for="tab in tabs"
       :key="tab.title"
       v-slot="{ isActive, isExactActive }"
       :to="tab.to"
-      class="flex items-center py-1 border-transparent md:border-b-2 w-full md:w-auto text-wp-text-100 cursor-pointer"
+      class="text-wp-text-100 flex w-full cursor-pointer items-center border-transparent py-1 md:w-auto md:border-b-2"
       :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
       :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
     >
@@ -16,7 +16,7 @@
       />
       <Icon v-else name="blank" class="md:hidden" />
       <span
-        class="flex flex-row md:justify-center items-center gap-2 dark:hover:bg-wp-background-100 hover:bg-wp-background-200 px-2 py-1 rounded-md w-full min-w-20"
+        class="dark:hover:bg-wp-background-100 hover:bg-wp-background-200 flex w-full min-w-20 flex-row items-center gap-2 rounded-md px-2 py-1 md:justify-center"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
         <span>{{ tab.title }}</span>
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index c298cbaa3d5..0780410f4e2 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 overflow-y-auto"
+    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 z-50 flex flex-col items-center overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,12 +12,12 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 hover:shadow-sm px-2 py-4 border-b w-full"
+      class="border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 flex w-full border-b px-2 py-4 hover:shadow-sm"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
 
-    <span v-if="sortedPipelines.length === 0" class="m-4 text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
+    <span v-if="sortedPipelines.length === 0" class="text-wp-text-100 m-4">{{ $t('repo.pipeline.no_pipelines') }}</span>
   </aside>
 </template>
 
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 6979a28ff29..4b55cf6a72c 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,11 +2,11 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex flex-col border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-200 hover:shadow-md p-4 border rounded-md cursor-pointer overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-200 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4 hover:shadow-md"
   >
-    <div class="items-center gap-y-4 grid grid-cols-[auto,1fr]">
-      <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
-      <div class="ml-auto text-wp-text-100">
+    <div class="grid grid-cols-[auto,1fr] items-center gap-y-4">
+      <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+      <div class="text-wp-text-100 ml-auto">
         <div
           v-if="repo.visibility === RepoVisibility.Private"
           :title="`${$t('repo.visibility.visibility')}: ${$t(`repo.visibility.private.private`)}`"
@@ -21,14 +21,14 @@
         </div>
       </div>
 
-      <div class="flex gap-x-4 col-span-2 w-full text-wp-text-100">
+      <div class="text-wp-text-100 col-span-2 flex w-full gap-x-4">
         <template v-if="lastPipeline">
-          <div class="flex flex-1 items-center gap-x-1 min-w-0">
+          <div class="flex min-w-0 flex-1 items-center gap-x-1">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
-            <span class="whitespace-nowrap overflow-ellipsis overflow-hidden">{{ shortMessage }}</span>
+            <span class="overflow-hidden overflow-ellipsis whitespace-nowrap">{{ shortMessage }}</span>
           </div>
 
-          <div class="flex flex-shrink-0 items-center gap-x-1 ml-auto">
+          <div class="ml-auto flex flex-shrink-0 items-center gap-x-1">
             <Icon name="since" />
             <span>{{ since }}</span>
           </div>
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 1971273f717..9126c05cf8e 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="flex flex-col flex-grow shadow md:mt-0 !p-0 !rounded-none !md:rounded-md overflow-hidden code-box-log"
+      class="!md:rounded-md code-box-log flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div class="<md:fixed <md:top-0 <md:left-0 flex flex-row items-center w-full bg-wp-code-100 px-4 py-2">
-        <span class="font-bold text-base text-wp-code-text-alt-100">
+      <div class="<md:fixed <md:top-0 <md:left-0 bg-wp-code-100 flex w-full flex-row items-center px-4 py-2">
+        <span class="text-wp-code-text-alt-100 text-base font-bold">
           <span class="<md:hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
         </span>
 
-        <div class="flex flex-row items-center gap-x-2 ml-auto">
+        <div class="ml-auto flex flex-row items-center gap-x-2">
           <IconButton
             v-if="step?.finished !== undefined && hasLogs"
             :is-loading="downloadInProgress"
@@ -47,13 +47,13 @@
       <div
         v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
         ref="consoleElement"
-        class="flex-grow grid grid-cols-[min-content,minmax(0,1fr),min-content] auto-rows-min p-4 w-full max-w-full text-xs md:text-sm overflow-x-hidden overflow-y-auto"
+        class="grid w-full max-w-full flex-grow auto-rows-min grid-cols-[min-content,minmax(0,1fr),min-content] overflow-y-auto overflow-x-hidden p-4 text-xs md:text-sm"
       >
-        <div v-for="line in log" :key="line.index" class="font-mono contents">
+        <div v-for="line in log" :key="line.index" class="contents font-mono">
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="text-right pr-6 pl-2 text-wp-code-text-alt-100 whitespace-nowrap select-none"
+            class="text-wp-code-text-alt-100 select-none whitespace-nowrap pl-2 pr-6 text-right"
             :class="{
               'bg-red-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
               'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
@@ -65,7 +65,7 @@
           </a>
           <!-- eslint-disable vue/no-v-html -->
           <span
-            class="align-top break-words whitespace-pre-wrap"
+            class="whitespace-pre-wrap break-words align-top"
             :class="{
               'bg-10.168.64.121-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
               'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
@@ -75,7 +75,7 @@
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="text-right pr-1 text-wp-code-text-alt-100 whitespace-nowrap select-none"
+            class="text-wp-code-text-alt-100 select-none whitespace-nowrap pr-1 text-right"
             :class="{
               'bg-red-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
               'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
@@ -87,7 +87,7 @@
         </div>
       </div>
 
-      <div class="m-auto text-wp-text-alt-100 text-xl">
+      <div class="text-wp-text-alt-100 m-auto text-xl">
         <span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.started">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
@@ -96,9 +96,9 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="flex items-center bg-wp-code-100 p-4 w-full font-bold text-md text-wp-code-text-alt-100"
+        class="bg-wp-code-100 text-md text-wp-code-text-alt-100 flex w-full items-center p-4 font-bold"
       >
-        <PipelineStatusIcon :status="step.state" class="!w-4 !h-4" />
+        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
         <span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index 26e03efb20d..1949042cbf2 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-2 pb-2 w-full md:w-3/12 md:min-w-xs md:max-w-md text-wp-text-100">
+  <div class="md:min-w-xs text-wp-text-100 flex w-full flex-col gap-2 pb-2 md:w-3/12 md:max-w-md">
     <div
-      class="flex flex-wrap flex-shrink-0 justify-between gap-1 border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 p-4 border rounded-md"
+      class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex flex-shrink-0 flex-wrap justify-between gap-1 rounded-md border p-4"
     >
       <div class="flex flex-shrink-0 items-center space-x-1">
         <div class="flex items-center">
@@ -12,7 +12,7 @@
       </div>
       <a
         v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
-        class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
+        class="text-wp-link-100 hover:text-wp-link-200 flex min-w-0 items-center space-x-1"
         :href="pipeline.forge_url"
       >
         <Icon name="pull-request" />
@@ -20,7 +20,7 @@
       </a>
       <router-link
         v-else-if="pipeline.event === 'push' || pipeline.event === 'manual' || pipeline.event === 'deployment'"
-        class="flex items-center space-x-1 min-w-0 text-wp-link-100 hover:text-wp-link-200"
+        class="text-wp-link-100 hover:text-wp-link-200 flex min-w-0 items-center space-x-1"
         :to="{ name: 'repo-branch', params: { branch: prettyRef } }"
       >
         <Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
@@ -28,7 +28,7 @@
         <Icon v-else-if="pipeline.event === 'deployment'" name="deployment" />
         <span class="truncate">{{ prettyRef }}</span>
       </router-link>
-      <div v-else class="flex items-center space-x-1 min-w-0">
+      <div v-else class="flex min-w-0 items-center space-x-1">
         <Icon v-if="pipeline.event === 'tag' || pipeline.event === 'release'" name="tag" />
 
         <span class="truncate">{{ prettyRef }}</span>
@@ -40,7 +40,7 @@
         </template>
         <a
           v-else
-          class="flex items-center text-wp-link-100 hover:text-wp-link-200"
+          class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
           :href="pipeline.forge_url"
           target="_blank"
         >
@@ -54,15 +54,15 @@
       <span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
     </Panel>
 
-    <div class="relative flex-grow w-full min-h-0">
-      <div class="top-0 right-0 left-0 absolute flex flex-col gap-y-2 h-full md:overflow-y-auto">
+    <div class="relative min-h-0 w-full flex-grow">
+      <div class="absolute left-0 right-0 top-0 flex h-full flex-col gap-y-2 md:overflow-y-auto">
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow p-2 border rounded-md"
+          class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 rounded-md border p-2 shadow"
         >
           <div class="flex flex-col gap-2">
-            <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
+            <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pr-1 pt-1 text-xs">
               <div v-for="(value, key) in workflow.environ" :key="key">
                 <Badge :label="key" :value="value" />
               </div>
@@ -71,15 +71,15 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 px-1 py-2 rounded-md hover-effect"
+              class="hover:bg-wp-background-300 dark:hover:bg-wp-background-400 hover-effect flex items-center gap-2 rounded-md px-1 py-2"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
                 name="chevron-right"
-                class="min-w-6 h-6 transition-transform duration-150"
-                :class="{ 'transform rotate-90': !workflowsCollapsed[workflow.id] }"
+                class="h-6 min-w-6 transition-transform duration-150"
+                :class="{ 'rotate-90 transform': !workflowsCollapsed[workflow.id] }"
               />
-              <PipelineStatusIcon :status="workflow.state" class="!w-4 !h-4" />
+              <PipelineStatusIcon :status="workflow.state" class="!h-4 !w-4" />
               <span class="truncate">{{ workflow.name }}</span>
               <PipelineStepDuration
                 v-if="workflow.started !== workflow.finished"
@@ -97,14 +97,14 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex items-center gap-2 border-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 p-2 border-transparent rounded-md w-full hover-effect"
+              class="hover:bg-wp-background-300 dark:hover:bg-wp-background-400 hover-effect flex w-full items-center gap-2 rounded-md border-2 border-transparent p-2"
               :class="{
                 'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
             >
-              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!w-4 !h-4" />
+              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!h-4 !w-4" />
               <span class="truncate">{{ step.name }}</span>
               <PipelineStepDuration :step="step" />
             </button>
diff --git a/web/src/style.css b/web/src/style.css
index 3fb3cb6a842..a556ceba735 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -155,16 +155,16 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 p-4 rounded-md text-sm break-words;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 break-words rounded-md p-4 text-sm;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 px-1.5 py-0.5 rounded-md;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md px-1.5 py-0.5;
 }
 
 .code-box-log {
-  @apply bg-wp-code-300 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
+  @apply bg-wp-code-300 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
   white-space: pre-wrap;
 }
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index cb6c0ab33f6..369201a9e96 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,25 +1,25 @@
 <template>
-  <main class="flex flex-col justify-center items-center w-full h-full">
-    <Error v-if="errorMessage" class="w-full md:w-3xl">
+  <main class="flex h-full w-full flex-col items-center justify-center">
+    <Error v-if="errorMessage" class="md:w-3xl w-full">
       <span class="whitespace-pre">{{ errorMessage }}</span>
       <span v-if="errorDescription" class="mt-1 whitespace-pre">{{ errorDescription }}</span>
       <a
         v-if="errorUri"
         :href="errorUri"
         target="_blank"
-        class="mt-1 text-wp-link-100 hover:text-wp-link-200 cursor-pointer"
+        class="text-wp-link-100 hover:text-wp-link-200 mt-1 cursor-pointer"
       >
         <span>{{ errorUri }}</span>
       </a>
     </Error>
 
     <div
-      class="flex md:flex-row flex-col border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow md:m-8 border md:rounded-md w-full md:w-3xl md:h-sm overflow-hidden"
+      class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 md:w-3xl md:h-sm flex w-full flex-col overflow-hidden border shadow md:m-8 md:flex-row md:rounded-md"
     >
-      <div class="flex justify-center items-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5 min-h-48">
-        <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 md:w-48 h-30 md:h-48" />
+      <div class="bg-wp-primary-200 dark:bg-wp-primary-300 flex min-h-48 items-center justify-center md:w-3/5">
+        <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 h-30 md:h-48 md:w-48" />
       </div>
-      <div class="flex flex-col justify-center items-center gap-4 md:w-2/5 min-h-48 text-center">
+      <div class="flex min-h-48 flex-col items-center justify-center gap-4 text-center md:w-2/5">
         <h1 class="text-wp-text-100 text-xl">{{ $t('welcome') }}</h1>
         <div class="flex flex-col gap-2">
           <Button

From 40353da1877a03c126d41c4e3454e3b86324ae6b Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:09:15 +0100
Subject: [PATCH 66/70] remove merge ref

---
 web/src/components/layout/Panel.vue | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 8ce3c300ac1..bc55fe54e16 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow border rounded-md w-full overflow-hidden"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
+      class="flex gap-2 bg-wp-background-400 px-4 py-2 w-full font-bold text-wp-text-100"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="h-6 min-w-6 transition-transform duration-150"
-        :class="{ 'rotate-90 transform': !collapsed }"
+        class="min-w-6 h-6 transition-transform duration-150"
+        :class="{ 'transform rotate-90': !collapsed }"
       />
       {{ title }}
     </component>
@@ -24,13 +24,8 @@
       }"
       class="transition-height overflow-hidden duration-150"
     >
-      <<<<<<< HEAD
-      <div class="text-wp-text-100 w-full p-4">
-        =======
-        <div class="text-wp-text-100 w-full p-4">
-          >>>>>>> main
-          <slot />
-        </div>
+      <div class="p-4 w-full text-wp-text-100">
+        <slot />
       </div>
     </div>
   </div>

From 41924c567c07a57b44c5fb23b97e70a1b8e6a44a Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:09:31 +0100
Subject: [PATCH 67/70] style

---
 web/src/components/layout/Panel.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index bc55fe54e16..4b92b90b668 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 shadow border rounded-md w-full overflow-hidden"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex gap-2 bg-wp-background-400 px-4 py-2 w-full font-bold text-wp-text-100"
+      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       @click="_collapsed = !_collapsed"
     >
       <Icon
         v-if="collapsable"
         name="chevron-right"
-        class="min-w-6 h-6 transition-transform duration-150"
-        :class="{ 'transform rotate-90': !collapsed }"
+        class="h-6 min-w-6 transition-transform duration-150"
+        :class="{ 'rotate-90 transform': !collapsed }"
       />
       {{ title }}
     </component>
@@ -24,7 +24,7 @@
       }"
       class="transition-height overflow-hidden duration-150"
     >
-      <div class="p-4 w-full text-wp-text-100">
+      <div class="text-wp-text-100 w-full p-4">
         <slot />
       </div>
     </div>

From 3ae04957432026963f49e66df146c103293182fe Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:29:44 +0100
Subject: [PATCH 68/70] reduce sorting changes

---
 web/src/App.vue                                          | 2 +-
 web/src/components/agent/AgentList.vue                   | 2 +-
 web/src/components/atomic/ListItem.vue                   | 2 +-
 web/src/components/form/TextField.vue                    | 2 +-
 web/src/components/layout/Panel.vue                      | 2 +-
 web/src/components/pipeline-feed/PipelineFeedSidebar.vue | 4 ++--
 web/src/components/repo/RepoItem.vue                     | 2 +-
 web/src/components/repo/pipeline/PipelineLog.vue         | 4 ++--
 8 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 9b856bbecd5..a516cbca60d 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-wp-background-200 dark:bg-wp-background-100 app m-auto flex h-full w-full flex-col">
+  <div class="app bg-wp-background-200 dark:bg-wp-background-100 m-auto flex h-full w-full flex-col">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 0d4f4c11ef4..a86f54331e5 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="!bg-wp-background-100 !dark:bg-wp-background-200 items-center"
+      class="!bg-wp-background-200 !dark:bg-wp-background-100 items-center"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index 3b4c2c52ed9..04ab96ea768 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,7 +2,7 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex w-full overflow-hidden rounded-md border p-4"
+    class="bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200 flex w-full overflow-hidden rounded-md border p-4"
     :class="{
       'hover:bg-wp-background-300 dark:hover:bg-wp-background-300 cursor-pointer hover:shadow-md': clickable || to,
     }"
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index efc6c86c2d2..7900609f5ea 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-100 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
+    class="border-wp-control-neutral-200 bg-wp-background-100 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 4b92b90b668..516220dbf4a 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow"
+    class="bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400 w-full overflow-hidden rounded-md border shadow"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index 0780410f4e2..f8bec698cfa 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="border-wp-background-400 bg-wp-background-200 dark:bg-wp-background-100 z-50 flex flex-col items-center overflow-y-auto"
+    class="bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400 z-50 flex flex-col items-center overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,7 +12,7 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-600 flex w-full border-b px-2 py-4 hover:shadow-sm"
+      class="border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full border-b px-2 py-4 hover:shadow-sm"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 4b55cf6a72c..cdbbc086191 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,7 +2,7 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 dark:bg-wp-background-200 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4 hover:shadow-md"
+    class="bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200 hover:bg-wp-background-300 dark:hover:bg-wp-background-300 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4 hover:shadow-md"
   >
     <div class="grid grid-cols-[auto,1fr] items-center gap-y-4">
       <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index 9126c05cf8e..8f7e9472011 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="!md:rounded-md code-box-log flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
+      class="code-box-log !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
@@ -37,7 +37,7 @@
             @click="autoScroll = !autoScroll"
           />
           <IconButton
-            class="!md:hidden !hover:bg-white !hover:bg-opacity-10"
+            class="!hover:bg-white !hover:bg-opacity-10 !md:hidden"
             icon="close"
             @click="$emit('update:step-id', null)"
           />

From ae12fad17753a2aa4a34a3ebf93a2f443413d58c Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:31:24 +0100
Subject: [PATCH 69/70] remove more sorting changes

---
 web/src/components/form/TextField.vue | 2 +-
 web/src/views/Login.vue               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index 7900609f5ea..fcdbd560955 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 bg-wp-background-200 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
+    class="border-wp-control-neutral-200 bg-wp-background-100 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-none"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 369201a9e96..2b0f71a26e6 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 md:w-3xl md:h-sm flex w-full flex-col overflow-hidden border shadow md:m-8 md:flex-row md:rounded-md"
+      class="bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200 md:w-3xl md:h-sm flex w-full flex-col overflow-hidden border shadow md:m-8 md:flex-row md:rounded-md"
     >
       <div class="bg-wp-primary-200 dark:bg-wp-primary-300 flex min-h-48 items-center justify-center md:w-3/5">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="w-30 h-30 md:h-48 md:w-48" />

From 869250547e2017911768d355231510c95521c3e7 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Tue, 31 Dec 2024 14:31:55 +0100
Subject: [PATCH 70/70] remove unused colors

---
 web/windi.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/web/windi.config.ts b/web/windi.config.ts
index f226104b8b1..7f426c90b60 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -120,8 +120,6 @@ export default defineConfig({
           200: 'var(--wp-background-200)',
           300: 'var(--wp-background-300)',
           400: 'var(--wp-background-400)',
-          500: 'var(--wp-background-500)',
-          600: 'var(--wp-background-600)',
         },
 
         'wp-text': {