Use consistent woodpecker color scheme (#2003)

Fixes: https://github.com/woodpecker-ci/woodpecker/issues/1079

What do you think about using a consistent `woodpecker` color scheme?
Right now, the `lime` color scheme from windicss is used that does not
really fit the primary color used for the documentation website. I have
used the primary color `#4CAF50` from the docs and created a color
palette with https://palettte.app/:

<details>
  <summary>JSON source</summary>

```Json
[
  {
    "paletteName": "New Palette",
    "swatches": [
      {
        "name": "New Swatch",
        "color": "166E30"
      },
      {
        "name": "New Swatch",
        "color": "248438"
      },
      {
        "name": "New Swatch",
        "color": "369943"
      },
      {
        "name": "New Swatch",
        "color": "4CAF50"
      },
      {
        "name": "New Swatch",
        "color": "68C464"
      },
      {
        "name": "New Swatch",
        "color": "8AD97F"
      }
    ]
  }
]
```

</details>


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/a254f1e0-ce17-43a9-9e8b-72252296fd6f)

I have added this color scheme to the windicss config and replaced the
use of `lime` in the UI. While `woodpecker-300` would be the primary
color that is used for the docs, I currently use `woodpecke-400` as
primary color for the UI to fix some contrast issues.


![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/7bf751e1-f2a6-481c-bee7-a27d27cf8adb)

![image](https://github.com/woodpecker-ci/woodpecker/assets/3391958/e5673dc7-81c1-4fd4-bef9-14494bc5aa27)

What do you think? If you would like to stay with the current colors,
that's fine for me, I can just use the custom CSS feature in this case.

---------

Co-authored-by: 6543 <6543@obermui.de>

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>