Rework background colors for light/dark theme (#5411)

Makefile

@@ -59,7 +59,7 @@ ifeq (in_docker,$(firstword $(MAKECMDGOALS)))
 		--user $(shell id -u):$(shell id -g) \
 		-e VERSION="$(VERSION)" \
 		-e CI_COMMIT_SHA="$(CI_COMMIT_SHA)" \
-		-e TARGETOS="$(TARGETOS)" \
+		-e TARGETOS="linux" \
 		-e TARGETARCH="$(TARGETARCH)" \
 		-e CGO_ENABLED="$(CGO_ENABLED)" \
 		-v $(PWD):/build --rm woodpecker/make:local make $(MAKE_ARGS)

web/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app bg-wp-background-200 dark:bg-wp-background-100 m-auto flex h-full w-full flex-col">
+  <div class="app bg-wp-background-100 dark:bg-wp-background-300 m-auto flex h-full w-full flex-col">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
@@ -8,7 +8,9 @@
           <router-view />
         </div>
         <transition name="slide-right">
-          <PipelineFeedSidebar class="absolute top-0 right-0 bottom-0 w-full max-w-80 border-l shadow-md xl:max-w-96" />
+          <PipelineFeedSidebar
+            class="dark:shadow-wp-background-500 absolute top-0 right-0 bottom-0 w-full max-w-80 border-l shadow-lg xl:max-w-96"
+          />
         </transition>
       </main>
     </template>

web/src/components/FileTree.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="group hover:bg-wp-background-200 dark:hover:bg-wp-background-100 flex cursor-pointer items-center rounded-md px-2 py-1.5 transition-all duration-150"
+      class="group hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex cursor-pointer items-center rounded-md px-2 py-1.5 transition-all duration-150"
       :class="{ 'font-medium': node.isDirectory }"
       tabindex="0"
       role="button"
@@ -36,7 +36,7 @@
 
     <div
       v-if="node.isDirectory && !collapsed"
-      class="border-wp-background-300 mt-1 ml-2 border-l pl-1 transition-all duration-200"
+      class="border-wp-background-400 dark:border-wp-background-100 mt-1 ml-2 border-l pl-1 transition-all duration-200"
     >
       <FileTree v-for="child in node.children" :key="child.path" :node="child" />
     </div>

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-300 bg-wp-background-200 text-wp-text-100 dark:bg-wp-background-100 w-full rounded-md border px-5 py-5"
+      class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-200 text-wp-text-100 dark:bg-wp-background-100 w-full rounded-md border px-5 py-5"
     >
       <div class="flex w-full">
         <h3 class="flex-1 text-lg leading-tight font-semibold uppercase">

web/src/components/agent/AgentList.vue

@@ -21,19 +21,21 @@
           agent.last_contact ? date.timeAgo(agent.last_contact * 1000) : $t('admin.settings.agents.never')
         }}</span>
       </span>
-      <IconButton
-        icon="edit"
-        :title="$t('admin.settings.agents.edit_agent')"
-        class="ml-2 h-8 w-8"
-        @click="$emit('edit', agent)"
-      />
-      <IconButton
-        icon="trash"
-        :title="$t('admin.settings.agents.delete_agent')"
-        class="hover:text-wp-error-100 ml-2 h-8 w-8"
-        :is-loading="isDeleting"
-        @click="$emit('delete', agent)"
-      />
+      <div class="ml-auto flex items-center gap-2">
+        <IconButton
+          icon="edit"
+          :title="$t('admin.settings.agents.edit_agent')"
+          class="h-8 w-8"
+          @click="$emit('edit', agent)"
+        />
+        <IconButton
+          icon="trash"
+          :title="$t('admin.settings.agents.delete_agent')"
+          class="hover:text-wp-error-100 h-8 w-8"
+          :is-loading="isDeleting"
+          @click="$emit('delete', agent)"
+        />
+      </div>
     </ListItem>
 
     <div v-if="loading" class="flex justify-center">

web/src/components/atomic/Badge.vue

@@ -2,7 +2,7 @@
   <span class="inline-flex items-center text-xs font-medium">
     <span
       v-if="label !== undefined"
-      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pr-1 pl-2 whitespace-nowrap text-gray-300"
+      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 rounded-l-full border-1 py-0.5 pr-1 pl-2 whitespace-nowrap text-white"
     >
       {{ label }}
     </span>

web/src/components/atomic/Button.vue

@@ -2,9 +2,9 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap shadow-xs transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
+    class="border-wp-background-400 dark:border-wp-background-100 relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
     :class="{
-      'border-wp-control-neutral-300 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
+      'border-wp-control-neutral-300 dark:border-wp-background-100 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
         color === 'gray',
       'border-wp-control-ok-300 bg-wp-control-ok-100 hover:bg-wp-control-ok-200 text-white': color === 'green',
       'border-wp-control-info-300 bg-wp-control-info-100 hover:bg-wp-control-info-200 text-white': color === 'blue',

web/src/components/atomic/CountBadge.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="bg-wp-background-300 text-wp-text-100 dark:bg-wp-background-100 inline-block min-w-5 rounded-full px-1.5 py-0.5 text-center text-xs leading-4 font-bold"
+    class="bg-wp-control-neutral-200 text-wp-text-100 dark:bg-wp-background-100 inline-block min-w-5 rounded-full px-1.5 py-0.5 text-center text-xs leading-4 font-bold"
   >
     {{ value }}
   </span>

web/src/components/atomic/IconButton.vue

@@ -47,6 +47,7 @@ defineProps<{
 @reference '~/tailwind.css';
 
 .icon-button {
-  @apply hover-effect relative flex cursor-pointer items-center justify-center overflow-hidden rounded-md bg-transparent px-1 py-1 disabled:cursor-not-allowed disabled:opacity-50;
+  @apply hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-300 relative flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-md bg-transparent px-1 py-1 disabled:cursor-not-allowed disabled:opacity-50;
+  @apply in-[.border-wp-background-400]:hover:bg-wp-control-neutral-200;
 }
 </style>

web/src/components/atomic/ListItem.vue

@@ -2,9 +2,9 @@
   <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="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-200 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,
+      'hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 cursor-pointer': clickable || to,
     }"
   >
     <slot />

web/src/components/form/Checkbox.vue

@@ -3,7 +3,7 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox border-wp-control-neutral-200 bg-wp-control-neutral-100 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
+      class="checkbox border-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />

web/src/components/form/RadioField.vue

@@ -3,7 +3,7 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio border-wp-control-neutral-200 bg-wp-control-neutral-100 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
+      class="radio border-wp-control-neutral-200 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
       :value="option.value"
       :checked="innerValue?.includes(option.value)"
       @click="innerValue = option.value"

web/src/components/form/TextField.vue

@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    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-hidden"
+    class="border-wp-control-neutral-200 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-hidden"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    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-hidden"
+    class="border-wp-control-neutral-200 dark:border-wp-control-neutral-100 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-hidden"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"

web/src/components/layout/Panel.vue

@@ -1,12 +1,10 @@
 <template>
-  <div
-    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow-sm"
-  >
+  <div class="border-wp-background-400 dark:border-wp-background-100 w-full overflow-hidden rounded-md border">
     <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="bg-wp-control-neutral-100 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       :class="{
         'cursor-pointer': collapsable,
       }"

web/src/components/layout/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <Panel>
-    <div class="dark:border-wp-background-100 mb-4 flex flex-col justify-center border-b pb-4">
+    <div class="border-wp-background-400 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 }}

web/src/components/layout/header/Navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="text-neutral-content border-wp-background-100 bg-wp-primary-200 text-wp-primary-text-100 dark:bg-wp-primary-300 flex border-b p-4 font-bold"
+    class="text-neutral-content border-wp-background-400 dark:border-wp-background-100 bg-wp-primary-200 text-wp-primary-text-100 dark:bg-wp-primary-300 flex border-b p-4 font-bold"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="-my-2 flex flex-col px-2">
@@ -37,7 +37,7 @@
         v-else
         :text="$t('login')"
         :to="`/login?url=${route.fullPath}`"
-        class="navbar-link !text-wp-primary-text-100 bg-wp-primary-200 dark:bg-wp-primary-300 !border-transparent !shadow-none"
+        class="navbar-link !text-wp-primary-text-100 bg-wp-primary-200 dark:bg-wp-primary-300 !border-transparent"
       />
     </div>
   </nav>
@@ -70,7 +70,7 @@ const { enableSwagger } = config;
 @reference '~/tailwind.css';
 
 .navbar-icon {
-  @apply h-11 w-11 rounded-md p-2.5;
+  @apply h-11 w-11 rounded-md p-2.5 hover:bg-black/20 dark:hover:bg-white/5;
 }
 
 .navbar-icon :deep(svg) {
@@ -78,6 +78,6 @@ const { enableSwagger } = config;
 }
 
 .navbar-link {
-  @apply hover-effect -my-1 rounded-md px-3 py-2;
+  @apply -my-1 rounded-md px-3 py-2 hover:bg-black/20 dark:hover:bg-white/5;
 }
 </style>

web/src/components/layout/scaffold/Header.vue

@@ -1,51 +1,51 @@
 <template>
-  <header class="border-wp-background-400 text-wp-text-100" :class="{ 'md:px-4': fullWidth }">
+  <header class="text-wp-text-100" :class="{ 'md:px-4': fullWidth }">
     <Container :full-width="fullWidth" class="relative py-0!">
-      <div class="flex w-full flex-col gap-2 py-3 md:flex-row md:items-center md:justify-between md:gap-10">
-        <div
-          class="flex min-h-10 content-start items-center"
-          :class="{
-            'md:flex-1': searchBoxPresent,
-          }"
-        >
-          <IconButton
-            v-if="goBack"
-            icon="back"
-            :title="$t('back')"
-            class="md:display-unset mr-2 hidden h-8 w-8 shrink-0 md:justify-between"
-            @click="goBack"
+      <div class="border-wp-background-400 dark:border-wp-background-100 border-b">
+        <div class="flex w-full flex-col gap-2 py-3 md:flex-row md:items-center md:justify-between md:gap-10">
+          <div
+            class="flex min-h-10 content-start items-center"
+            :class="{
+              'md:flex-1': searchBoxPresent,
+            }"
+          >
+            <IconButton
+              v-if="goBack"
+              icon="back"
+              :title="$t('back')"
+              class="md:display-unset mr-2 hidden h-8 w-8 shrink-0 md:justify-between"
+              @click="goBack"
+            />
+            <h1 class="text-wp-text-100 flex min-w-0 items-center gap-x-2 text-xl">
+              <slot name="title" />
+            </h1>
+          </div>
+          <TextField
+            v-if="searchBoxPresent"
+            class="order-3 w-full grow md:order-none md:w-auto"
+            :aria-label="$t('search')"
+            :placeholder="$t('search')"
+            :model-value="search"
+            @update:model-value="(value: string) => $emit('update:search', value)"
           />
-          <h1 class="text-wp-text-100 flex min-w-0 items-center gap-x-2 text-xl">
-            <slot name="title" />
-          </h1>
+          <div
+            v-if="$slots.headerActions"
+            class="flex min-w-0 items-center gap-x-2 md:justify-end"
+            :class="{
+              'md:flex-1': searchBoxPresent,
+            }"
+          >
+            <slot name="headerActions" />
+          </div>
         </div>
-        <TextField
-          v-if="searchBoxPresent"
-          class="order-3 w-full grow md:order-none md:w-auto"
-          :aria-label="$t('search')"
-          :placeholder="$t('search')"
-          :model-value="search"
-          @update:model-value="(value: string) => $emit('update:search', value)"
-        />
-        <div
-          v-if="$slots.headerActions"
-          class="flex min-w-0 items-center gap-x-2 md:justify-end"
-          :class="{
-            'md:flex-1': searchBoxPresent,
-          }"
-        >
-          <slot name="headerActions" />
+
+        <div v-if="enableTabs" class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:py-0">
+          <Tabs class="order-2 md:order-none" />
+          <div v-if="$slots.headerActions" class="flex flex-wrap content-start md:justify-end">
+            <slot name="tabActions" />
+          </div>
         </div>
       </div>
-
-      <div v-if="enableTabs" class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between md:py-0">
-        <Tabs class="order-2 md:order-none" />
-        <div v-if="$slots.headerActions" class="flex flex-wrap content-start md:justify-end">
-          <slot name="tabActions" />
-        </div>
-      </div>
-
-      <div class="bg-wp-background-400 -mt-px h-px w-full rounded-md" />
     </Container>
   </header>
 </template>

web/src/components/layout/scaffold/Tabs.vue

@@ -10,7 +10,7 @@
       :exact-active-class="tab.matchChildren ? '' : 'border-wp-text-100!'"
     >
       <span
-        class="hover:bg-wp-background-300 dark:hover:bg-wp-background-200 flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1"
+        class="hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1"
       >
         <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="shrink-0" />
         <span>{{ tab.title }}</span>
@@ -24,7 +24,7 @@
 
       <div
         v-if="isDropdownOpen"
-        class="tabs-dropdown border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 absolute z-20 mt-1 rounded-md border shadow-lg"
+        class="tabs-dropdown border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-200 dark:shadow-wp-background-500 absolute z-20 mt-1 rounded-md border shadow-lg"
         :class="[visibleTabs.length === 0 ? 'left-0' : 'right-0']"
       >
         <router-link
@@ -35,7 +35,7 @@
           @click="isDropdownOpen = false"
         >
           <span
-            class="hover:bg-wp-background-200 dark:hover:bg-wp-background-100 flex w-full min-w-20 flex-row gap-2 rounded-md px-2 py-1"
+            class="hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex w-full min-w-20 flex-row gap-2 rounded-md px-2 py-1"
           >
             <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="shrink-0" />
             <span>{{ tab.title }}</span>

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-100 dark:bg-wp-background-200 z-50 flex flex-col items-center overflow-y-auto"
+    class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-300 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-400 flex w-full border-b px-2 py-4 hover:shadow-xs"
+      class="border-wp-background-400 dark:border-wp-background-100 hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex w-full border-b px-2 py-4"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>

web/src/components/registry/RegistryList.vue

@@ -3,23 +3,25 @@
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
+      class="bg-wp-background-200! dark:bg-wp-background-200! items-center"
     >
       <span>{{ registry.address }}</span>
-      <IconButton
-        :icon="registry.readonly ? 'chevron-right' : 'edit'"
-        class="ml-auto h-8 w-8"
-        :title="registry.readonly ? $t('registries.view') : $t('registries.edit')"
-        @click="editRegistry(registry)"
-      />
-      <IconButton
-        v-if="!registry.readonly"
-        icon="trash"
-        class="hover:text-wp-error-100 h-8 w-8"
-        :is-loading="isDeleting"
-        :title="$t('registries.delete')"
-        @click="deleteRegistry(registry)"
-      />
+      <div class="ml-auto flex items-center gap-2">
+        <IconButton
+          :icon="registry.readonly ? 'chevron-right' : 'edit'"
+          class="h-8 w-8"
+          :title="registry.readonly ? $t('registries.view') : $t('registries.edit')"
+          @click="editRegistry(registry)"
+        />
+        <IconButton
+          v-if="!registry.readonly"
+          icon="trash"
+          class="hover:text-wp-error-100 h-8 w-8"
+          :is-loading="isDeleting"
+          :title="$t('registries.delete')"
+          @click="deleteRegistry(registry)"
+        />
+      </div>
     </ListItem>
 
     <div v-if="loading" class="flex justify-center">

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:bg-wp-background-200 dark:hover:bg-wp-background-300 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4 hover:shadow-md"
+    class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-200 dark:bg-wp-background-200 hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4"
   >
     <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>

web/src/components/repo/pipeline/PipelineLog.vue

@@ -7,7 +7,7 @@
     }"
   >
     <div
-      class="code-box-log flex grow flex-col overflow-hidden p-0! shadow-sm md:mt-0 md:rounded-md!"
+      class="code-box-log flex grow flex-col overflow-hidden p-0! md:mt-0 md:rounded-md!"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
@@ -22,7 +22,7 @@
         <div class="ml-auto flex flex-row items-center gap-x-2">
           <IconButton
             :title="fullscreen ? $t('exit_fullscreen') : $t('fullscreen')"
-            class="hidden! md:flex!"
+            class="hidden! hover:bg-white/10! md:flex!"
             :icon="fullscreen ? 'exit-fullscreen' : 'fullscreen'"
             @click="fullscreen = !fullscreen"
           />

web/src/components/repo/pipeline/PipelineStepList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="text-wp-text-100 flex w-full flex-col gap-2 pb-2 md:w-3/12 md:max-w-md md:min-w-xs">
     <div
-      class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex shrink-0 flex-wrap justify-between gap-1 rounded-md border p-4"
+      class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-200 flex shrink-0 flex-wrap justify-between gap-1 rounded-md border p-4"
     >
       <div class="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-100 dark:bg-wp-background-200 rounded-md border p-2 shadow-sm"
+          class="border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-200 rounded-md border p-2"
         >
           <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="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex cursor-pointer items-center gap-2 rounded-md px-1 py-2"
+              class="hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex cursor-pointer items-center gap-2 rounded-md px-1 py-2"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -99,9 +99,10 @@
               :data-step-id="step.pid"
               type="button"
               :title="step.name"
-              class="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-transparent p-2"
+              class="hover:bg-wp-control-neutral-100 dark:hover:bg-wp-control-neutral-200 flex w-full cursor-pointer 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,
+                'bg-wp-control-neutral-100 dark:bg-wp-control-neutral-200':
+                  selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"

web/src/components/secrets/SecretList.vue

@@ -3,7 +3,7 @@
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
+      class="bg-wp-background-200! dark:bg-wp-background-200! items-center"
     >
       <span>{{ secret.name }}</span>
       <Badge
@@ -14,21 +14,16 @@
       <div class="md:display-unset ml-auto hidden space-x-2">
         <Badge v-for="event in secret.events" :key="event" :value="event" />
       </div>
-      <template v-if="secret.edit !== false">
-        <IconButton
-          icon="edit"
-          class="ml-auto h-8 w-8 md:ml-2"
-          :title="$t('secrets.edit')"
-          @click="editSecret(secret)"
-        />
+      <div v-if="secret.edit !== false" class="flex items-center gap-2">
+        <IconButton icon="edit" class="h-8 w-8 md:ml-2" :title="$t('secrets.edit')" @click="editSecret(secret)" />
         <IconButton
           icon="trash"
-          class="hover:text-wp-error-100 ml-2 h-8 w-8"
+          class="hover:text-wp-error-100 h-8 w-8"
           :is-loading="isDeleting"
           :title="$t('secrets.delete')"
           @click="deleteSecret(secret)"
         />
-      </template>
+      </div>
     </ListItem>
 
     <div v-if="loading" class="flex justify-center">

web/src/style.css

@@ -3,9 +3,10 @@
 :root,
 :root[data-theme='light'] {
   --wp-background-100: var(--color-white);
-  --wp-background-200: var(--color-gray-100);
+  --wp-background-200: var(--color-gray-50);
   --wp-background-300: var(--color-gray-200);
   --wp-background-400: var(--color-gray-300);
+  --wp-background-500: var(--color-gray-400);
 
   --wp-text-100: var(--color-gray-600);
   --wp-text-200: var(--color-gray-700);
@@ -16,9 +17,9 @@
   --wp-primary-300: var(--color-int-wp-primary-500);
   --wp-primary-text-100: var(--color-white);
 
-  --wp-control-neutral-100: var(--color-white);
-  --wp-control-neutral-200: var(--color-gray-300);
-  --wp-control-neutral-300: var(--color-gray-400);
+  --wp-control-neutral-100: var(--color-gray-100);
+  --wp-control-neutral-200: var(--color-gray-200);
+  --wp-control-neutral-300: var(--color-gray-300);
 
   --wp-control-info-100: var(--color-int-wp-control-info-100);
   --wp-control-info-200: var(--color-int-wp-control-info-200);
@@ -57,10 +58,11 @@
 }
 
 :root[data-theme='dark'] {
-  --wp-background-100: var(--color-int-wp-secondary-300);
+  --wp-background-100: var(--color-int-wp-secondary-200);
   --wp-background-200: var(--color-int-wp-secondary-400);
   --wp-background-300: var(--color-int-wp-secondary-500);
   --wp-background-400: var(--color-int-wp-secondary-600);
+  --wp-background-500: var(--color-int-wp-secondary-800);
 
   --wp-text-100: var(--color-gray-300);
   --wp-text-200: var(--color-gray-200);
@@ -71,9 +73,9 @@
   --wp-primary-300: var(--color-int-wp-secondary-600);
   --wp-primary-text-100: var(--color-gray-300);
 
-  --wp-control-neutral-100: var(--color-int-wp-secondary-300);
-  --wp-control-neutral-200: var(--color-int-wp-secondary-600);
-  --wp-control-neutral-300: var(--color-int-wp-secondary-700);
+  --wp-control-neutral-100: var(--color-int-wp-secondary-400);
+  --wp-control-neutral-200: var(--color-int-wp-secondary-300);
+  --wp-control-neutral-300: var(--color-int-wp-secondary-200);
 
   --wp-control-info-100: var(--color-int-wp-control-info-dark-100);
   --wp-control-info-200: var(--color-int-wp-control-info-dark-200);

web/src/tailwind.css

@@ -1044,10 +1044,6 @@
   }
 }
 
-@utility hover-effect {
-  @apply hover:bg-black/20 dark:hover:bg-white/5;
-}
-
 @utility w-fill {
   width: -webkit-fill-available;
   width: -moz-available;

web/src/views/Login.vue

@@ -14,7 +14,7 @@
     </Error>
 
     <div
-      class="min-h-sm border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex w-full flex-col overflow-hidden border shadow-sm md:m-8 md:w-3xl md:flex-row md:rounded-md"
+      class="min-h-sm border-wp-background-400 dark:border-wp-background-100 bg-wp-background-100 dark:bg-wp-background-200 flex w-full flex-col overflow-hidden border md:m-8 md:w-3xl 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="h-32 w-32 md:h-48 md:w-48" />

web/src/views/admin/AdminOrgs.vue

@@ -4,28 +4,30 @@
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="bg-wp-background-200! dark:bg-wp-background-100! items-center gap-2"
+        class="bg-wp-background-200! dark:bg-wp-background-200! items-center gap-2"
       >
         <span>{{ org.name }}</span>
-        <IconButton
-          icon="chevron-right"
-          :title="$t('admin.settings.orgs.view')"
-          class="ml-auto h-8 w-8"
-          :to="{ name: 'org', params: { orgId: org.id } }"
-        />
-        <IconButton
-          icon="settings-outline"
-          :title="$t('admin.settings.orgs.org_settings')"
-          class="h-8 w-8"
-          :to="{ name: 'org-settings', params: { orgId: org.id } }"
-        />
-        <IconButton
-          icon="trash"
-          :title="$t('admin.settings.orgs.delete_org')"
-          class="hover:text-wp-error-100 ml-2 h-8 w-8"
-          :is-loading="isDeleting"
-          @click="deleteOrg(org)"
-        />
+        <div class="ml-auto flex items-center gap-2">
+          <IconButton
+            icon="chevron-right"
+            :title="$t('admin.settings.orgs.view')"
+            class="h-8 w-8"
+            :to="{ name: 'org', params: { orgId: org.id } }"
+          />
+          <IconButton
+            icon="settings-outline"
+            :title="$t('admin.settings.orgs.org_settings')"
+            class="h-8 w-8"
+            :to="{ name: 'org-settings', params: { orgId: org.id } }"
+          />
+          <IconButton
+            icon="trash"
+            :title="$t('admin.settings.orgs.delete_org')"
+            class="hover:text-wp-error-100 h-8 w-8"
+            :is-loading="isDeleting"
+            @click="deleteOrg(org)"
+          />
+        </div>
       </ListItem>
 
       <div v-if="loading" class="flex justify-center">

web/src/views/admin/AdminQueue.vue

@@ -30,7 +30,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="bg-wp-background-200! dark:bg-wp-background-100! mb-2 flex-col items-center gap-4"
+          class="bg-wp-background-200! dark:bg-wp-background-200! mb-2 flex-col items-center gap-4"
         >
           <div class="flex w-full items-center justify-between border-b pb-2">
             <div

web/src/views/admin/AdminRepos.vue

@@ -13,10 +13,10 @@
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="bg-wp-background-200 dark:bg-wp-background-100! items-center gap-2"
+        class="bg-wp-background-200 dark:bg-wp-background-200! items-center gap-2"
       >
         <span>{{ repo.full_name }}</span>
-        <div class="ml-auto flex items-center">
+        <div class="ml-auto flex items-center gap-2">
           <Badge
             v-if="!repo.active"
             class="md:display-unset mr-2 hidden"

web/src/views/admin/AdminUsers.vue

@@ -14,7 +14,7 @@
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="bg-wp-background-200! dark:bg-wp-background-100! items-center gap-2"
+        class="bg-wp-background-200! dark:bg-wp-background-200! items-center gap-2"
       >
         <img v-if="user.avatar_url" class="h-6 rounded-md" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
@@ -23,20 +23,21 @@
           class="md:display-unset ml-auto hidden"
           :value="$t('admin.settings.users.admin.admin')"
         />
-        <IconButton
-          icon="edit"
-          :title="$t('admin.settings.users.edit_user')"
-          class="md:display-unset h-8 w-8"
-          :class="{ 'ml-auto': !user.admin, 'ml-2': user.admin }"
-          @click="editUser(user)"
-        />
-        <IconButton
-          icon="trash"
-          :title="$t('admin.settings.users.delete_user')"
-          class="hover:text-wp-error-100 ml-2 h-8 w-8"
-          :is-loading="isDeleting"
-          @click="deleteUser(user)"
-        />
+        <div class="flex items-center gap-2" :class="{ 'ml-auto': !user.admin, 'ml-2': user.admin }">
+          <IconButton
+            icon="edit"
+            :title="$t('admin.settings.users.edit_user')"
+            class="md:display-unset h-8 w-8"
+            @click="editUser(user)"
+          />
+          <IconButton
+            icon="trash"
+            :title="$t('admin.settings.users.delete_user')"
+            class="hover:text-wp-error-100 h-8 w-8"
+            :is-loading="isDeleting"
+            @click="deleteUser(user)"
+          />
+        </div>
       </ListItem>
 
       <div v-if="loading" class="flex justify-center">

web/src/views/admin/forges/AdminForges.vue

@@ -8,23 +8,25 @@
       <ListItem
         v-for="forge in forges"
         :key="forge.id"
-        class="bg-wp-background-200! dark:bg-wp-background-100! items-center gap-2"
+        class="bg-wp-background-200! dark:bg-wp-background-200! items-center gap-2"
       >
         <span>{{ forge.url.replace(/http(s):\/\//, '') }}</span>
         <Badge class="md:display-unset ml-auto hidden" :value="forge.type" />
-        <IconButton
-          icon="edit"
-          :title="$t('edit_forge')"
-          class="md:display-unset h-8 w-8"
-          :to="{ name: 'admin-settings-forge', params: { forgeId: forge.id } }"
-        />
-        <IconButton
-          icon="trash"
-          :title="$t('delete_forge')"
-          class="hover:text-wp-error-100 ml-2 h-8 w-8"
-          :is-loading="isDeleting"
-          @click="deleteForge(forge)"
-        />
+        <div class="flex items-center gap-2">
+          <IconButton
+            icon="edit"
+            :title="$t('edit_forge')"
+            class="h-8 w-8"
+            :to="{ name: 'admin-settings-forge', params: { forgeId: forge.id } }"
+          />
+          <IconButton
+            icon="trash"
+            :title="$t('delete_forge')"
+            class="hover:text-wp-error-100 h-8 w-8"
+            :is-loading="isDeleting"
+            @click="deleteForge(forge)"
+          />
+        </div>
       </ListItem>
 
       <div v-if="loading" class="flex justify-center">

web/src/views/repo/pipeline/PipelineConfig.vue

@@ -7,7 +7,11 @@
       collapsed-by-default
       :title="pipelineConfigsDecoded && pipelineConfigsDecoded.length > 1 ? pipelineConfig.name : ''"
     >
-      <SyntaxHighlight class="overflow-auto font-mono whitespace-pre" language="yaml" :code="pipelineConfig.data" />
+      <SyntaxHighlight
+        class="code-box overflow-auto font-mono whitespace-pre"
+        language="yaml"
+        :code="pipelineConfig.data"
+      />
     </Panel>
   </div>
 </template>

web/src/views/repo/settings/Crons.vue

@@ -18,7 +18,7 @@
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
+        class="bg-wp-background-200! dark:bg-wp-background-200! items-center"
       >
         <span class="grid w-full grid-cols-3">
           <span>{{ cron.name }}</span>
@@ -30,20 +30,27 @@
             $t('repo.settings.crons.not_executed_yet')
           }}</span>
         </span>
-        <IconButton
-          icon="play-outline"
-          class="ml-auto h-8 w-8"
-          :title="$t('repo.settings.crons.run')"
-          @click="runCron(cron)"
-        />
-        <IconButton icon="edit" class="h-8 w-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
-        <IconButton
-          icon="trash"
-          class="hover:text-wp-error-100 h-8 w-8"
-          :is-loading="isDeleting"
-          :title="$t('repo.settings.crons.delete')"
-          @click="deleteCron(cron)"
-        />
+        <div class="flex items-center gap-2">
+          <IconButton
+            icon="play-outline"
+            class="h-8 w-8"
+            :title="$t('repo.settings.crons.run')"
+            @click="runCron(cron)"
+          />
+          <IconButton
+            icon="edit"
+            class="h-8 w-8"
+            :title="$t('repo.settings.crons.edit')"
+            @click="selectedCron = cron"
+          />
+          <IconButton
+            icon="trash"
+            class="hover:text-wp-error-100 h-8 w-8"
+            :is-loading="isDeleting"
+            :title="$t('repo.settings.crons.delete')"
+            @click="deleteCron(cron)"
+          />
+        </div>
       </ListItem>
 
       <div v-if="loading" class="flex justify-center">