Use consistent woodpecker color scheme

.gitignore

@@ -27,6 +27,7 @@ web/dist/**
 web/node_modules/
 web/*.log
 web/.env
+.pnpm-store
 
 ### Docker ###
 docker-compose.yml
@@ -36,7 +37,6 @@ docker-compose.yml
 *.sqlite
 *.out
 /.env
-/.pnpm-store
 extras/
 /build/
 /dist/

web/package.json

@@ -57,6 +57,7 @@
     "eslint-plugin-vue": "^9.15.1",
     "eslint-plugin-vue-scoped-css": "^2.5.0",
     "prettier": "^2.8.8",
+    "tinycolor2": "^1.6.0",
     "typescript": "5.0.3",
     "unplugin-icons": "^0.16.3",
     "unplugin-vue-components": "^0.24.1",

web/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app flex flex-col m-auto w-full h-full bg-gray-100 dark:bg-dark-gray-600">
+  <div class="app flex flex-col m-auto w-full h-full bg-wp-background-200 dark:bg-wp-background-100">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />

web/src/assets/locales/en.json

@@ -238,7 +238,7 @@
             "step_not_started": "This step hasn't started yet.",
             "pipelines_for": "Pipelines for branch \"{branch}\"",
             "pipelines_for_pr": "Pipelines for pull request #{index}",
-            "exit_code": "exit code {exitCode}",
+            "exit_code": "Exit Code {exitCode}",
             "loading": "Loading…",
             "pipeline": "Pipeline #{pipelineId}",
             "log_download_error": "There was an error while downloading the log file",

web/src/components/admin/settings/AdminAgentsTab.vue

@@ -1,9 +1,9 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
       <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.agents.agents') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.agents.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.agents.agents') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.agents.desc') }}</p>
       </div>
       <Button
         v-if="selectedAgent"
@@ -15,8 +15,12 @@
       <Button v-else class="ml-auto" :text="$t('admin.settings.agents.add')" start-icon="plus" @click="showAddAgent" />
     </div>
 
-    <div v-if="!selectedAgent" class="space-y-4 text-color">
-      <ListItem v-for="agent in agents" :key="agent.id" class="items-center">
+    <div v-if="!selectedAgent" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="agent in agents"
+        :key="agent.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
         <span>{{ agent.name || `Agent ${agent.id}` }}</span>
         <span class="ml-auto">
           <span class="hidden md:inline-block space-x-2">
@@ -35,7 +39,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.agents.delete_agent')"
-          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
           :is-loading="isDeleting"
           @click="deleteAgent(agent)"
         />
@@ -85,7 +89,7 @@
             :label="$t('admin.settings.agents.capacity.capacity')"
             docs-url="docs/next/administration/agent-config#woodpecker_max_procs"
           >
-            <span class="text-color-alt">{{ $t('admin.settings.agents.capacity.desc') }}</span>
+            <span class="text-wp-text-alt-100">{{ $t('admin.settings.agents.capacity.desc') }}</span>
             <TextField :model-value="selectedAgent.capacity?.toString()" disabled />
           </InputField>
 

web/src/components/admin/settings/AdminQueueTab.vue

@@ -1,9 +1,9 @@
 <template>
   <Panel>
-    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div v-if="queueInfo" class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
       <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.queue.queue') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.queue.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.queue.queue') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.queue.desc') }}</p>
       </div>
 
       <div class="ml-auto flex items-center gap-2">
@@ -24,8 +24,8 @@
         <Icon
           :name="queueInfo.paused ? 'pause' : 'play'"
           :class="{
-            'text-red-400': queueInfo.paused,
-            'text-lime-400': !queueInfo.paused,
+            'text-wp-state-error-100': queueInfo.paused,
+            'text-wp-state-ok-100': !queueInfo.paused,
           }"
         />
       </div>
@@ -36,7 +36,11 @@
 
       <div v-if="tasks.length > 0" class="flex flex-col">
         <p class="mt-6 mb-2 text-xl">{{ $t('admin.settings.queue.tasks') }}</p>
-        <ListItem v-for="task in tasks" :key="task.id" class="items-center mb-2">
+        <ListItem
+          v-for="task in tasks"
+          :key="task.id"
+          class="items-center mb-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+        >
           <div
             class="flex items-center"
             :title="
@@ -56,9 +60,9 @@
                   : 'status-declined'
               "
               :class="{
-                'text-red-400': task.status === 'waiting_on_deps',
-                'text-blue-400': task.status === 'running',
-                'text-gray-400': task.status === 'pending',
+                'text-wp-state-error-100': task.status === 'waiting_on_deps',
+                'text-wp-state-info-100': task.status === 'running',
+                'text-wp-state-neutral-100': task.status === 'pending',
               }"
             />
           </div>

web/src/components/admin/settings/AdminSecretsTab.vue

@@ -1,9 +1,9 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
       <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
           {{ $t('admin.settings.secrets.desc') }}
           <DocsLink :topic="$t('admin.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>

web/src/components/admin/settings/AdminUsersTab.vue

@@ -1,9 +1,9 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
       <div class="ml-2">
-        <h1 class="text-xl text-color">{{ $t('admin.settings.users.users') }}</h1>
-        <p class="text-sm text-color-alt">{{ $t('admin.settings.users.desc') }}</p>
+        <h1 class="text-xl text-wp-text-100">{{ $t('admin.settings.users.users') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">{{ $t('admin.settings.users.desc') }}</p>
       </div>
       <Button
         v-if="selectedUser"
@@ -15,8 +15,12 @@
       <Button v-else class="ml-auto" :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
     </div>
 
-    <div v-if="!selectedUser" class="space-y-4 text-color">
-      <ListItem v-for="user in users" :key="user.id" class="items-center gap-2">
+    <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="user in users"
+        :key="user.id"
+        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>
         <Badge
@@ -34,7 +38,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.users.delete_user')"
-          class="ml-2 w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
           :is-loading="isDeleting"
           @click="deleteUser(user)"
         />

web/src/components/admin/settings/queue/AdminQueueStats.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="stats" class="flex justify-center">
-    <div class="bg-gray-100 dark:bg-dark-gray-600 text-color dark:text-gray-400 rounded-md py-5 px-5 w-full">
+    <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"
+    >
       <div class="flex w-full">
         <h3 class="text-lg font-semibold leading-tight uppercase flex-1">
           {{ $t('admin.settings.queue.stats.completed_count') }}
@@ -81,28 +83,28 @@ const data = computed(() => {
       label: t('admin.settings.queue.stats.worker_count'),
       value: props.stats.worker_count,
       perc: total.value > 0 ? (props.stats.worker_count / total.value) * 100 : 0,
-      color: 'bg-lime-400',
+      color: 'bg-wp-state-ok-100',
     },
     {
       key: 'running_count',
       label: t('admin.settings.queue.stats.running_count'),
       value: props.stats.running_count,
       perc: total.value > 0 ? (props.stats.running_count / total.value) * 100 : 100,
-      color: 'bg-blue-400',
+      color: 'bg-wp-state-info-100',
     },
     {
       key: 'pending_count',
       label: t('admin.settings.queue.stats.pending_count'),
       value: props.stats.pending_count,
       perc: total.value > 0 ? (props.stats.pending_count / total.value) * 100 : 0,
-      color: 'bg-gray-400',
+      color: 'bg-wp-state-neutral-100',
     },
     {
       key: 'waiting_on_deps_count',
       label: t('admin.settings.queue.stats.waiting_on_deps_count'),
       value: props.stats.waiting_on_deps_count,
       perc: total.value > 0 ? (props.stats.waiting_on_deps_count / total.value) * 100 : 0,
-      color: 'bg-red-400',
+      color: 'bg-wp-state-error-100',
     },
   ];
 });

web/src/components/atomic/Badge.vue

@@ -1,17 +1,14 @@
 <template>
   <span class="text-xs font-medium inline-flex">
     <span
-      class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 dark:bg-gray-600 border-2 border-gray-800 dark:border-gray-600 rounded-l-full"
+      class="pl-2 pr-1 py-0.5 bg-wp-state-neutral-100 text-gray-300 border-2 border-wp-state-neutral-100 rounded-l-full"
       :class="{
         'rounded-r-full pr-2': value === undefined,
       }"
     >
       {{ label }}
     </span>
-    <span
-      v-if="value !== undefined"
-      class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full"
-    >
+    <span v-if="value !== undefined" class="pl-1 pr-2 py-0.5 border-2 border-wp-state-neutral-100 rounded-r-full">
       {{ value }}
     </span>
   </span>

web/src/components/atomic/Button.vue

@@ -3,14 +3,11 @@
     type="button"
     class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
     :class="{
-      'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
+      'bg-wp-control-neutral-100 hover:bg-wp-control-neutral-200 border-wp-control-neutral-300 text-wp-text-100':
         color === 'gray',
-      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-300 dark:bg-lime-900 dark:hover:bg-lime-800':
-        color === 'green',
-      'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-300 dark:bg-cyan-900 dark:hover:bg-cyan-800':
-        color === 'blue',
-      'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-300 dark:bg-red-900 dark:hover:bg-red-800':
-        color === 'red',
+      'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
+      'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
+      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
       ...passedClasses,
     }"
     :title="title"
@@ -26,10 +23,10 @@
         :class="{
           'opacity-100': isLoading,
           'opacity-0': !isLoading,
-          'bg-white dark:bg-dark-gray-700': color === 'gray',
-          'bg-lime-700': color === 'green',
-          'bg-cyan-700': color === 'blue',
-          'bg-red-600': color === 'red',
+          'bg-wp-control-neutral-200': color === 'gray',
+          'bg-wp-control-ok-200': color === 'green',
+          'bg-wp-control-info-200': color === 'blue',
+          'bg-wp-control-error-200': color === 'red',
         }"
       >
         <Icon name="loading" class="animate-spin" />

web/src/components/atomic/DocsLink.vue

@@ -3,7 +3,7 @@
     :href="`${docsUrl}`"
     :title="$t('documentation_for', { topic: topic })"
     target="_blank"
-    class="text-blue-500 hover:text-blue-600 cursor-pointer mt-1"
+    class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer mt-1"
     ><Icon name="question" class="!w-4 !h-4"
   /></a>
 </template>

web/src/components/atomic/ListItem.vue

@@ -2,8 +2,10 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="w-full flex border rounded-md bg-white overflow-hidden p-4 border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400"
-    :class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable || 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="{
+      'cursor-pointer hover:shadow-md hover:bg-wp-background-300 dark:hover:bg-wp-background-300': clickable || to,
+    }"
   >
     <slot />
   </component>

web/src/components/atomic/Warning.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-sm text-gray-600 font-bold rounded-md border border-solid p-2 border-yellow-500 bg-yellow-200 dark:bg-yellow-600 dark:border-yellow-800 dark:text-light-100"
+    class="text-sm text-gray-700 font-bold rounded-md border border-solid p-2 border-wp-hint-warn-200 bg-wp-hint-warn-100"
   >
     ⚠ {{ text }}
   </div>

web/src/components/form/Checkbox.vue

@@ -3,13 +3,13 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
+      class="checkbox flex-shrink-0 relative border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-wp-control-ok-200 checked:border-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />
     <div class="flex flex-col ml-4">
-      <label v-if="label" class="cursor-pointer text-color" :for="`checkbox-${id}`">{{ label }}</label>
-      <span v-if="description" class="text-sm text-color-alt">{{ description }}</span>
+      <label v-if="label" class="cursor-pointer text-wp-text-100" :for="`checkbox-${id}`">{{ label }}</label>
+      <span v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</span>
     </div>
   </div>
 </template>
@@ -82,7 +82,7 @@ export default defineComponent({
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -60%) rotate(45deg);
   opacity: 0;
-  @apply dark:border-gray-300;
+  @apply dark:border-white;
 }
 
 .checkbox:checked::before {

web/src/components/form/InputField.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col mt-2 mb-4">
-    <div class="flex items-center text-color font-bold mb-2">
+    <div class="flex items-center text-wp-text-100 font-bold mb-2">
       <label v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
     </div>
     <slot />
-    <div v-if="$slots['description']" class="ml-1 text-color-alt">
+    <div v-if="$slots['description']" class="ml-1 text-wp-text-alt-100">
       <slot name="description" />
     </div>
   </div>