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] 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 b7a2503d6..f0ef3a16e 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 5aa0fbda3..e20726581 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 2e0303195..92f555550 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 f1b40b3ce..aca5d976c 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 268a868b7..397ac2d5a 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 8f9d2bda2..f3e42e498 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 f3e15aca7..89e41390f 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 3c740c661..8352d4ddd 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 43d2526d1..ea644bfb5 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 55a91be9b..46a0d0b48 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 49040f6f9..c298cbaa3 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 2fe0794f6..775a02eb4 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 64d3ac727..6979a28ff 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 c19aa7ac4..ba44d8cf9 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 b857f9828..3201453d2 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 c88043557..d4900e7b7 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 f6561ea2c..cb6c0ab33 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 42f90144c..2ce9e3f80 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 9e56a5ead..a644de789 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 8cf09bad9..d44f4ba77 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 6de727084..09ca5883d 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 f4cbbe92e..e9e354803 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>