From dca01e6817b8039eef20edbbb0283e5ceea202cf Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Wed, 2 Aug 2023 09:09:12 +0200
Subject: [PATCH] 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>
---
 .gitignore                                    |   2 +-
 web/package.json                              |   1 +
 web/pnpm-lock.yaml                            |   7 +
 web/src/App.vue                               |   2 +-
 web/src/assets/locales/en.json                |   2 +-
 .../admin/settings/AdminAgentsTab.vue         |  18 +-
 .../admin/settings/AdminQueueTab.vue          |  22 +-
 .../admin/settings/AdminSecretsTab.vue        |   6 +-
 .../admin/settings/AdminUsersTab.vue          |  16 +-
 .../admin/settings/queue/AdminQueueStats.vue  |  12 +-
 web/src/components/atomic/Badge.vue           |   7 +-
 web/src/components/atomic/Button.vue          |  19 +-
 web/src/components/atomic/DocsLink.vue        |   2 +-
 web/src/components/atomic/ListItem.vue        |   6 +-
 web/src/components/atomic/Warning.vue         |   2 +-
 web/src/components/form/Checkbox.vue          |   8 +-
 web/src/components/form/InputField.vue        |   4 +-
 web/src/components/form/RadioField.vue        |   8 +-
 web/src/components/form/SelectField.vue       |   8 +-
 web/src/components/form/TextField.vue         |   8 +-
 web/src/components/layout/Panel.vue           |   8 +-
 web/src/components/layout/header/Navbar.vue   |   8 +-
 .../layout/popups/DeployPipelinePopup.vue     |   6 +-
 .../layout/popups/ManualPipelinePopup.vue     |   4 +-
 web/src/components/layout/scaffold/Header.vue |   8 +-
 web/src/components/layout/scaffold/Tabs.vue   |   4 +-
 .../components/org/settings/OrgSecretsTab.vue |   6 +-
 .../pipeline-feed/PipelineFeedItem.vue        |   2 +-
 .../pipeline-feed/PipelineFeedSidebar.vue     |   6 +-
 .../components/repo/pipeline/PipelineItem.vue |  22 +-
 .../components/repo/pipeline/PipelineList.vue |   2 +-
 .../components/repo/pipeline/PipelineLog.vue  |  37 ++--
 .../repo/pipeline/PipelineRunningIcon.vue     |   4 +-
 .../repo/pipeline/PipelineStatusIcon.vue      |   8 +-
 .../repo/pipeline/PipelineStepList.vue        |  21 +-
 .../components/repo/settings/ActionsTab.vue   |  14 +-
 web/src/components/repo/settings/BadgeTab.vue |  13 +-
 web/src/components/repo/settings/CronTab.vue  |  20 +-
 .../components/repo/settings/GeneralTab.vue   |  13 +-
 .../repo/settings/RegistriesTab.vue           |  16 +-
 .../components/repo/settings/SecretsTab.vue   |   6 +-
 web/src/components/secrets/SecretList.vue     |  20 +-
 web/src/compositions/useDarkMode.ts           |   6 +-
 web/src/style.css                             | 110 +++++++++-
 web/src/views/Login.vue                       |  12 +-
 web/src/views/RepoAdd.vue                     |   4 +-
 web/src/views/Repos.vue                       |   2 +-
 web/src/views/User.vue                        |  34 +--
 web/src/views/org/OrgRepos.vue                |   4 +-
 web/src/views/repo/RepoBranch.vue             |   2 +-
 web/src/views/repo/RepoBranches.vue           |   2 +-
 web/src/views/repo/RepoPullRequest.vue        |   2 +-
 web/src/views/repo/RepoPullRequests.vue       |   8 +-
 web/src/views/repo/pipeline/Pipeline.vue      |  12 +-
 .../repo/pipeline/PipelineChangedFiles.vue    |   2 +-
 .../views/repo/pipeline/PipelineWrapper.vue   |   2 +-
 web/windi.config.ts                           | 200 +++++++++++++++++-
 57 files changed, 561 insertions(+), 249 deletions(-)

diff --git a/.gitignore b/.gitignore
index 5b6c87da9..c196ac54c 100644
--- a/.gitignore
+++ b/.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/
diff --git a/web/package.json b/web/package.json
index f7aada656..7d7d5b2f5 100644
--- a/web/package.json
+++ b/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",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 59da7ee62..f06dce3aa 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -124,6 +124,9 @@ devDependencies:
   prettier:
     specifier: ^2.8.8
     version: 2.8.8
+  tinycolor2:
+    specifier: ^1.6.0
+    version: 1.6.0
   typescript:
     specifier: 5.0.3
     version: 5.0.3
@@ -3191,6 +3194,10 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+    dev: true
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
diff --git a/web/src/App.vue b/web/src/App.vue
index 7636425ff..98e0ffb41 100644
--- a/web/src/App.vue
+++ b/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 />
diff --git a/web/src/assets/locales/en.json b/web/src/assets/locales/en.json
index 10441c7c4..2a8f61ff7 100644
--- a/web/src/assets/locales/en.json
+++ b/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",
diff --git a/web/src/components/admin/settings/AdminAgentsTab.vue b/web/src/components/admin/settings/AdminAgentsTab.vue
index 8598173b2..f5074d6a4 100644
--- a/web/src/components/admin/settings/AdminAgentsTab.vue
+++ b/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>
 
diff --git a/web/src/components/admin/settings/AdminQueueTab.vue b/web/src/components/admin/settings/AdminQueueTab.vue
index b38e849cd..e31979869 100644
--- a/web/src/components/admin/settings/AdminQueueTab.vue
+++ b/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>
diff --git a/web/src/components/admin/settings/AdminSecretsTab.vue b/web/src/components/admin/settings/AdminSecretsTab.vue
index ab832d784..9c46a629e 100644
--- a/web/src/components/admin/settings/AdminSecretsTab.vue
+++ b/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>
diff --git a/web/src/components/admin/settings/AdminUsersTab.vue b/web/src/components/admin/settings/AdminUsersTab.vue
index 0b95cacc1..7197d629c 100644
--- a/web/src/components/admin/settings/AdminUsersTab.vue
+++ b/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)"
         />
diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 8c32b567f..dcf2d832d 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/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',
     },
   ];
 });
diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 4576ea57e..c8bd5d5be 100644
--- a/web/src/components/atomic/Badge.vue
+++ b/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>
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index ecdc3f59b..b6df22ff8 100644
--- a/web/src/components/atomic/Button.vue
+++ b/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" />
diff --git a/web/src/components/atomic/DocsLink.vue b/web/src/components/atomic/DocsLink.vue
index cb07c66ce..340cd1742 100644
--- a/web/src/components/atomic/DocsLink.vue
+++ b/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>
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index d5a663ea4..92095f9d9 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/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>
diff --git a/web/src/components/atomic/Warning.vue b/web/src/components/atomic/Warning.vue
index 0b8f4431b..f261416ef 100644
--- a/web/src/components/atomic/Warning.vue
+++ b/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>
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 47f0e3d07..e80adfb03 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/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 {
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 37007ff5e..913bc99a0 100644
--- a/web/src/components/form/InputField.vue
+++ b/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>
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index a3d45b4b9..6e97e47c3 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -3,14 +3,14 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full 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="radio relative flex-shrink-0 border bg-wp-control-neutral-100 border-wp-control-neutral-200 cursor-pointer rounded-full 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"
       :value="option.value"
       :checked="innerValue.includes(option.value)"
       @click="innerValue = option.value"
     />
     <div class="flex flex-col ml-4">
-      <label class="cursor-pointer text-color" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
-      <span v-if="option.description" class="text-sm text-color-alt">{{ option.description }}</span>
+      <label class="cursor-pointer text-wp-text-100" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <span v-if="option.description" class="text-sm text-wp-text-alt-100">{{ option.description }}</span>
     </div>
   </div>
 </template>
@@ -81,7 +81,7 @@ export default defineComponent({
   background: white;
   transform: translate(-50%, -50%);
   opacity: 0;
-  @apply dark:bg-gray-300;
+  @apply dark:bg-white;
 }
 
 .radio:checked::before {
diff --git a/web/src/components/form/SelectField.vue b/web/src/components/form/SelectField.vue
index b6d25a234..940518f38 100644
--- a/web/src/components/form/SelectField.vue
+++ b/web/src/components/form/SelectField.vue
@@ -1,14 +1,10 @@
 <template>
   <select
     v-model="innerValue"
-    class="dark:bg-dark-gray-700 bg-transparent text-color border-gray-200 dark:border-dark-400 w-full border py-1 px-2 rounded-md"
-    :class="{
-      'text-color': innerValue === '',
-      'text-gray-900': innerValue !== '',
-    }"
+    class="bg-wp-control-neutral-100 text-wp-text-100 border-wp-control-neutral-200 w-full border py-1 px-2 rounded-md"
   >
     <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
-    <option v-for="option in options" :key="option.value" :value="option.value" class="text-color">
+    <option v-for="option in options" :key="option.value" :value="option.value" class="text-wp-text-100">
       {{ option.text }}
     </option>
   </select>
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index 91e0eec16..ab17d87bf 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,8 +2,8 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
-    :class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
+    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="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
     :placeholder="placeholder"
@@ -11,8 +11,8 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white dark:bg-dark-gray-700 dark:border-dark-400 focus-visible:outline-none focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
-    :class="{ 'bg-gray-200 dark:bg-gray-600': disabled }"
+    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="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"
     :rows="lines"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 9b7dfa778..4dca09708 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,10 +1,12 @@
 <template>
-  <div class="rounded-md w-full shadow overflow-hidden bg-gray-300 dark:bg-dark-gray-700">
+  <div
+    class="rounded-md w-full shadow overflow-hidden bg-wp-background-100 dark:bg-wp-background-200 border border-wp-background-400"
+  >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex w-full font-bold gap-2 text-gray-200 bg-gray-400 dark:bg-dark-gray-800 px-4 py-2"
+      class="flex w-full font-bold gap-2 text-wp-text-100 px-4 py-2 bg-wp-background-300"
       @click="collapsed && (_collapsed = !_collapsed)"
     >
       <Icon
@@ -22,7 +24,7 @@
       }"
       class="transition-height duration-150 overflow-hidden"
     >
-      <div class="w-full p-4 bg-white dark:bg-dark-gray-700 text-color">
+      <div class="w-full p-4 text-wp-text-100">
         <slot />
       </div>
     </div>
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 0af833dfb..08eb2e8ff 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,8 +1,10 @@
 <template>
   <!-- Navbar -->
-  <nav class="flex bg-lime-600 text-neutral-content p-4 dark:bg-dark-gray-800 dark:border-b dark:border-gray-700">
+  <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"
+  >
     <!-- Left Links Box -->
-    <div class="flex text-white dark:text-gray-400 items-center space-x-2">
+    <div class="flex items-center space-x-2">
       <!-- Logo -->
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
         <img class="w-8 h-8" src="../../../assets/logo.svg?url" />
@@ -19,7 +21,7 @@
       <a :href="apiUrl" target="_blank" class="navbar-link navbar-clickable hidden md:flex">{{ $t('api') }}</a>
     </div>
     <!-- Right Icons Box -->
-    <div class="flex ml-auto -m-1.5 items-center space-x-2 text-white dark:text-gray-400">
+    <div class="flex ml-auto -m-1.5 items-center space-x-2">
       <!-- Dark Mode Toggle -->
       <IconButton
         :icon="darkMode ? 'dark' : 'light'"
diff --git a/web/src/components/layout/popups/DeployPipelinePopup.vue b/web/src/components/layout/popups/DeployPipelinePopup.vue
index 20eacc104..29398a3a1 100644
--- a/web/src/components/layout/popups/DeployPipelinePopup.vue
+++ b/web/src/components/layout/popups/DeployPipelinePopup.vue
@@ -2,12 +2,14 @@
   <Popup :open="open" @close="$emit('close')">
     <Panel v-if="!loading">
       <form @submit.prevent="triggerDeployPipeline">
-        <span class="text-xl text-color">{{ $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber }) }}</span>
+        <span class="text-xl text-wp-text-100">{{
+          $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
+        }}</span>
         <InputField :label="$t('repo.deploy_pipeline.enter_target')">
           <TextField v-model="payload.environment" required />
         </InputField>
         <InputField :label="$t('repo.deploy_pipeline.variables.title')">
-          <span class="text-sm text-color-alt mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
+          <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
           <div class="flex flex-col gap-2">
             <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
               <TextField :model-value="name" disabled />
diff --git a/web/src/components/layout/popups/ManualPipelinePopup.vue b/web/src/components/layout/popups/ManualPipelinePopup.vue
index 164bfe27c..16996e862 100644
--- a/web/src/components/layout/popups/ManualPipelinePopup.vue
+++ b/web/src/components/layout/popups/ManualPipelinePopup.vue
@@ -2,12 +2,12 @@
   <Popup :open="open" @close="$emit('close')">
     <Panel v-if="!loading">
       <form @submit.prevent="triggerManualPipeline">
-        <span class="text-xl text-color">{{ $t('repo.manual_pipeline.title') }}</span>
+        <span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
         <InputField :label="$t('repo.manual_pipeline.select_branch')">
           <SelectField v-model="payload.branch" :options="branches" required />
         </InputField>
         <InputField :label="$t('repo.manual_pipeline.variables.title')">
-          <span class="text-sm text-color-alt mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
+          <span class="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
           <div class="flex flex-col gap-2">
             <div v-for="(value, name) in payload.variables" :key="name" class="flex gap-4">
               <TextField :model-value="name" disabled />
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index ce99e15ea..a4887aaf3 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,5 +1,7 @@
 <template>
-  <header class="bg-white dark:bg-dark-gray-900 border-b dark:border-gray-700 text-color">
+  <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"
+  >
     <FluidContainer class="!py-0">
       <div class="flex w-full items-center justify-between py-4 <md:flex-row <md:gap-y-4">
         <div
@@ -15,13 +17,13 @@
             class="flex-shrink-0 mr-2 <md:hidden"
             @click="goBack"
           />
-          <h1 class="flex text-xl min-w-0 text-color items-center gap-x-2">
+          <h1 class="flex text-xl min-w-0 text-wp-text-100 items-center gap-x-2">
             <slot name="title" />
           </h1>
         </div>
         <TextField
           v-if="searchBoxPresent"
-          class="w-auto !bg-gray-100 !dark:bg-dark-gray-600 placeholder-gray-500 <md:w-full <md:order-3"
+          class="w-auto <md:w-full <md:order-3"
           :placeholder="$t('search')"
           :model-value="search"
           @update:model-value="(value: string) => $emit('update:search', value)"
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index c2f992dd1..6fc503b1f 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -3,9 +3,9 @@
     <button
       v-for="tab in tabs"
       :key="tab.id"
-      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
+      class="w-full py-2 md:w-auto md:py-2 md:px-8 flex cursor-pointer md:border-b-2 text-wp-text-100 hover:text-wp-text-200 items-center"
       :class="{
-        'border-gray-400 dark:border-gray-600': activeTab === tab.id,
+        'border-wp-text-100': activeTab === tab.id,
         'border-transparent': activeTab !== tab.id,
       }"
       type="button"
diff --git a/web/src/components/org/settings/OrgSecretsTab.vue b/web/src/components/org/settings/OrgSecretsTab.vue
index 4f46e272f..ad175a325 100644
--- a/web/src/components/org/settings/OrgSecretsTab.vue
+++ b/web/src/components/org/settings/OrgSecretsTab.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('org.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('org.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
           {{ $t('org.settings.secrets.desc') }}
           <DocsLink :topic="$t('org.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>
diff --git a/web/src/components/pipeline-feed/PipelineFeedItem.vue b/web/src/components/pipeline-feed/PipelineFeedItem.vue
index 1a0f6a176..321394c5a 100644
--- a/web/src/components/pipeline-feed/PipelineFeedItem.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="pipeline" class="flex text-color w-full">
+  <div v-if="pipeline" class="flex text-wp-text-100 w-full">
     <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
     <div class="flex flex-col ml-4 min-w-0">
       <span class="underline">{{ repo?.owner }} / {{ repo?.name }}</span>
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index f73881e1c..2b65847dc 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <aside
     v-if="isOpen"
-    class="flex flex-col z-50 overflow-y-auto items-center bg-white dark:bg-dark-gray-800 dark:border-dark-500"
+    class="flex flex-col z-50 overflow-y-auto items-center bg-wp-background-100 dark:bg-wp-background-200 border-wp-background-400"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -11,12 +11,12 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex border-b py-4 px-2 w-full hover:bg-light-300 dark:hover:bg-dark-gray-900 dark:border-dark-gray-600 hover:shadow-sm"
+      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"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
 
-    <span v-if="sortedPipelines.length === 0" class="text-color m-4">{{ $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/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index cf4b4fd3c..6630d2643 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -4,11 +4,11 @@
       <div
         class="h-full w-3"
         :class="{
-          'bg-yellow-400 dark:bg-dark-200': pipeline.status === 'pending',
-          'bg-red-400 dark:bg-red-800': pipelineStatusColors[pipeline.status] === 'red',
-          'bg-gray-600 dark:bg-gray-500': pipelineStatusColors[pipeline.status] === 'gray',
-          'bg-lime-400 dark:bg-lime-900': pipelineStatusColors[pipeline.status] === 'green',
-          'bg-blue-400 dark:bg-blue-900': pipelineStatusColors[pipeline.status] === 'blue',
+          'bg-wp-state-warn-100': pipeline.status === 'pending',
+          'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
+          'bg-wp-state-neutral-100': pipelineStatusColors[pipeline.status] === 'gray',
+          'bg-wp-state-ok-100': pipelineStatusColors[pipeline.status] === 'green',
+          'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',
         }"
       />
       <div class="w-8 flex flex-wrap justify-between items-center h-full">
@@ -19,18 +19,20 @@
 
     <div class="flex py-2 px-4 flex-grow min-w-0 <md:flex-wrap">
       <div class="<md:hidden flex items-center flex-shrink-0">
-        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-color" />
+        <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
         <img v-else class="rounded-md w-8" :src="pipeline.author_avatar" />
       </div>
 
       <div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
-        <span class="text-color-alt <md:hidden">#{{ pipeline.number }}</span>
-        <span class="text-color-alt <md:hidden mx-2">-</span>
-        <span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
+        <span class="text-wp-text-alt-100 <md:hidden">#{{ pipeline.number }}</span>
+        <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+        <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+          message
+        }}</span>
       </div>
 
       <div
-        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-color"
+        class="grid grid-rows-2 grid-flow-col w-full md:ml-auto md:w-96 py-2 gap-x-4 gap-y-2 flex-shrink-0 text-wp-text-100"
       >
         <div class="flex space-x-2 items-center min-w-0">
           <Icon v-if="pipeline.event === 'pull_request'" name="pull_request" />
diff --git a/web/src/components/repo/pipeline/PipelineList.vue b/web/src/components/repo/pipeline/PipelineList.vue
index f82580bbb..9236bec38 100644
--- a/web/src/components/repo/pipeline/PipelineList.vue
+++ b/web/src/components/repo/pipeline/PipelineList.vue
@@ -10,7 +10,7 @@
       :pipeline="pipeline"
     />
     <Panel v-if="pipelines.length === 0">
-      <span class="text-color">{{ $t('repo.pipeline.no_pipelines') }}</span>
+      <span class="text-wp-text-100">{{ $t('repo.pipeline.no_pipelines') }}</span>
     </Panel>
   </div>
 </template>
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index f18c69dc4..1acd3ec00 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="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-gray-600 dark:bg-dark-gray-800 text-gray-50"
+      class="fixed top-0 left-0 w-full md:hidden flex px-4 py-2 bg-wp-background-100 dark:bg-wp-background-200 text-wp-text-100"
       @click="$emit('update:step-id', null)"
     >
       <span>{{ step?.name }}</span>
@@ -9,11 +9,11 @@
     </div>
 
     <div
-      class="flex flex-grow flex-col bg-white shadow dark:bg-dark-gray-700 md:m-2 md:mt-0 md:rounded-md overflow-hidden"
+      class="flex flex-grow flex-col code-box shadow !p-0 !rounded-none md:m-2 md:mt-0 !md:rounded-md overflow-hidden"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
-      <div v-show="showActions" class="absolute top-0 right-0 z-40 mt-2 mr-4 hidden md:flex">
+      <div v-show="showActions" class="absolute top-0 right-0 z-40 mt-4 mr-6 hidden md:flex">
         <Button
           v-if="step?.end_time !== undefined"
           :is-loading="downloadInProgress"
@@ -34,59 +34,57 @@
       <div
         v-show="hasLogs && loadedLogs"
         ref="consoleElement"
-        class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] auto-rows-min flex-grow p-2 overflow-x-hidden overflow-y-auto"
+        class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] p-4 auto-rows-min flex-grow overflow-x-hidden overflow-y-auto"
       >
         <div v-for="line in log" :key="line.index" class="contents font-mono">
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="text-gray-500 whitespace-nowrap select-none text-right pl-1 pr-2"
+            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pl-2 pr-6"
             :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',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
               underline: isSelected(line),
             }"
             >{{ line.number }}</a
           >
           <!-- eslint-disable vue/no-v-html -->
           <span
-            class="align-top text-color whitespace-pre-wrap break-words"
+            class="align-top whitespace-pre-wrap break-words text-sm"
             :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-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',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
             }"
             v-html="line.text"
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="text-gray-500 whitespace-nowrap select-none text-right pr-1"
+            class="text-wp-text-alt-100 whitespace-nowrap select-none text-right pr-1"
             :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',
-              'bg-opacity-20 bg-blue-600': isSelected(line),
+              'bg-opacity-30 bg-blue-600': isSelected(line),
             }"
             >{{ formatTime(line.time) }}</span
           >
         </div>
       </div>
 
-      <div class="m-auto text-xl text-color">
-        <span v-if="step?.error" class="text-red-400">{{ step.error }}</span>
-        <span v-else-if="step?.state === 'skipped'" class="text-red-400">{{
-          $t('repo.pipeline.actions.canceled')
-        }}</span>
+      <div class="m-auto text-xl text-wp-text-alt-100">
+        <span v-if="step?.error">{{ step.error }}</span>
+        <span v-else-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.start_time">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
       </div>
 
       <div
         v-if="step?.end_time !== undefined"
-        :class="step.exit_code == 0 ? 'dark:text-lime-400 text-lime-700' : 'dark:text-red-400 text-red-600'"
-        class="w-full bg-gray-200 dark:bg-dark-gray-800 text-md p-4"
+        class="flex items-center w-full bg-wp-code-100 text-md text-wp-text-alt-100 p-4 font-bold"
       >
-        {{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}
+        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
+        <span class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
     </div>
   </div>
@@ -104,6 +102,7 @@ import { useRoute } from 'vue-router';
 
 import Button from '~/components/atomic/Button.vue';
 import Icon from '~/components/atomic/Icon.vue';
+import PipelineStatusIcon from '~/components/repo/pipeline/PipelineStatusIcon.vue';
 import useApiClient from '~/compositions/useApiClient';
 import useNotifications from '~/compositions/useNotifications';
 import { Pipeline, Repo } from '~/lib/api/types';
diff --git a/web/src/components/repo/pipeline/PipelineRunningIcon.vue b/web/src/components/repo/pipeline/PipelineRunningIcon.vue
index e0bc184e8..94e6c3138 100644
--- a/web/src/components/repo/pipeline/PipelineRunningIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineRunningIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <WoodpeckerIcon class="woodpecker h-20" />
+  <WoodpeckerIcon class="woodpecker h-15" />
 </template>
 
 <script lang="ts" setup>
@@ -27,6 +27,6 @@ import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';
 
 .woodpecker ::v-deep(path) {
   animation: peck 1s ease infinite;
-  @apply fill-gray-600 dark:fill-gray-500;
+  @apply fill-wp-text-100;
 }
 </style>
diff --git a/web/src/components/repo/pipeline/PipelineStatusIcon.vue b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
index 0b3cb294c..58d214b28 100644
--- a/web/src/components/repo/pipeline/PipelineStatusIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineStatusIcon.vue
@@ -6,10 +6,10 @@
     <Icon
       :name="`status-${status}`"
       :class="{
-        'text-red-400': pipelineStatusColors[status] === 'red',
-        'text-gray-400': pipelineStatusColors[status] === 'gray',
-        'text-lime-400': pipelineStatusColors[status] === 'green',
-        'text-blue-400': pipelineStatusColors[status] === 'blue',
+        'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
+        'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
+        'text-wp-state-ok-100': pipelineStatusColors[status] === 'green',
+        'text-wp-state-info-100': pipelineStatusColors[status] === 'blue',
       }"
     />
   </div>
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index a16273389..f7a46bfe1 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 w-full md:w-3/12 md:ml-2 text-gray-600 dark:text-gray-400 gap-2 pb-2">
+  <div class="flex flex-col w-full md:w-3/12 md:ml-2 text-wp-text-100 gap-2 pb-2">
     <div
-      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md bg-white shadow dark:bg-dark-gray-700"
+      class="flex flex-wrap p-4 gap-1 justify-between flex-shrink-0 md:rounded-md border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
     >
       <div class="flex space-x-1 items-center flex-shrink-0">
         <div class="flex items-center">
@@ -17,7 +17,7 @@
         <Icon v-else-if="pipeline.event === 'tag'" name="tag" />
         <a
           v-else-if="pipeline.event === 'pull_request'"
-          class="flex items-center space-x-1 text-link min-w-0"
+          class="flex items-center space-x-1 text-wp-link-100 hover:text-wp-link-200 min-w-0"
           :href="pipeline.link_url"
           target="_blank"
         >
@@ -31,7 +31,12 @@
           <Icon name="commit" />
           <span>{{ pipeline.commit.slice(0, 10) }}</span>
         </template>
-        <a v-else class="text-blue-700 dark:text-link flex items-center" :href="pipeline.link_url" target="_blank">
+        <a
+          v-else
+          class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
+          :href="pipeline.link_url"
+          target="_blank"
+        >
           <Icon name="commit" />
           <span>{{ pipeline.commit.slice(0, 10) }}</span>
         </a>
@@ -47,7 +52,7 @@
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="p-2 md:rounded-md bg-white shadow dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
+          class="p-2 md:rounded-md shadow border bg-wp-background-100 border-wp-background-400 dark:bg-wp-background-200"
         >
           <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">
@@ -59,7 +64,7 @@
               v-if="pipeline.workflows && pipeline.workflows.length > 1"
               type="button"
               :title="workflow.name"
-              class="flex items-center gap-2 py-2 px-1 hover-effect rounded-md"
+              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"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -89,9 +94,9 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="flex p-2 gap-2 border-2 border-transparent rounded-md items-center hover-effect w-full"
+              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="{
-                'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-5': selectedStepId && selectedStepId === step.pid,
+                'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
                 'mt-1':
                   (pipeline.workflows && pipeline.workflows.length > 1) ||
                   (workflow.children && step.pid !== workflow.children[0].pid),
diff --git a/web/src/components/repo/settings/ActionsTab.vue b/web/src/components/repo/settings/ActionsTab.vue
index 0cc570b03..1fdd38a5b 100644
--- a/web/src/components/repo/settings/ActionsTab.vue
+++ b/web/src/components/repo/settings/ActionsTab.vue
@@ -1,12 +1,12 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.actions.actions') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.actions.actions') }}</h1>
     </div>
 
-    <div class="flex flex-col">
+    <div class="flex flex-wrap items-center">
       <Button
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
         color="blue"
         start-icon="heal"
         :is-loading="isRepairingRepo"
@@ -16,7 +16,7 @@
 
       <Button
         v-if="isActive"
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
         color="blue"
         start-icon="turn-off"
         :is-loading="isDeactivatingRepo"
@@ -25,7 +25,7 @@
       />
       <Button
         v-else
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
         color="blue"
         start-icon="turn-off"
         :is-loading="isActivatingRepo"
@@ -34,7 +34,7 @@
       />
 
       <Button
-        class="mr-auto mt-4"
+        class="mr-4 my-1"
         color="red"
         start-icon="trash"
         :is-loading="isDeletingRepo"
diff --git a/web/src/components/repo/settings/BadgeTab.vue b/web/src/components/repo/settings/BadgeTab.vue
index b4edced8d..75e770ced 100644
--- a/web/src/components/repo/settings/BadgeTab.vue
+++ b/web/src/components/repo/settings/BadgeTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.badge.badge') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.badge.badge') }}</h1>
       <a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="ml-auto">
         <img :src="badgeUrl" />
       </a>
@@ -33,7 +33,7 @@
 
     <div v-if="badgeContent" class="flex flex-col space-y-4">
       <div>
-        <pre class="box">{{ badgeContent }}</pre>
+        <pre class="code-box">{{ badgeContent }}</pre>
       </div>
     </div>
   </Panel>
@@ -129,10 +129,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style scoped>
-.box {
-  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
-  white-space: pre-wrap;
-}
-</style>
diff --git a/web/src/components/repo/settings/CronTab.vue b/web/src/components/repo/settings/CronTab.vue
index 2f4dd708f..8104cddc0 100644
--- a/web/src/components/repo/settings/CronTab.vue
+++ b/web/src/components/repo/settings/CronTab.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('repo.settings.crons.crons') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.crons.crons') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
           {{ $t('repo.settings.crons.desc') }}
           <DocsLink :topic="$t('repo.settings.crons.crons')" url="docs/usage/crons" />
         </p>
@@ -24,8 +24,12 @@
       />
     </div>
 
-    <div v-if="!selectedCron" class="space-y-4 text-color">
-      <ListItem v-for="cron in crons" :key="cron.id" class="items-center">
+    <div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="cron in crons"
+        :key="cron.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
         <span>{{ cron.name }}</span>
         <span v-if="cron.next_exec && cron.next_exec > 0" class="ml-auto">
           {{ $t('repo.settings.crons.next_exec') }}: {{ date.toLocaleString(new Date(cron.next_exec * 1000)) }}</span
@@ -35,7 +39,7 @@
         <IconButton icon="edit" class="w-8 h-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
         <IconButton
           icon="trash"
-          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="w-8 h-8 hover:text-wp-control-error-100"
           :is-loading="isDeleting"
           :title="$t('repo.settings.crons.delete')"
           @click="deleteCron(cron)"
@@ -67,11 +71,11 @@
         </InputField>
 
         <div v-if="isEditingCron" class="ml-auto mb-4">
-          <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-color">
+          <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-wp-text-100">
             {{ $t('repo.settings.crons.next_exec') }}:
             {{ date.toLocaleString(new Date(selectedCron.next_exec * 1000)) }}
           </span>
-          <span v-else class="text-color">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
+          <span v-else class="text-wp-text-100">{{ $t('repo.settings.crons.not_executed_yet') }}</span>
         </div>
 
         <div class="flex gap-2">
diff --git a/web/src/components/repo/settings/GeneralTab.vue b/web/src/components/repo/settings/GeneralTab.vue
index 5053b72a0..33fa9c1fb 100644
--- a/web/src/components/repo/settings/GeneralTab.vue
+++ b/web/src/components/repo/settings/GeneralTab.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel>
-    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-gray-600">
-      <h1 class="text-xl ml-2 text-color">{{ $t('repo.settings.general.general') }}</h1>
+    <div class="flex flex-row border-b mb-4 pb-4 items-center dark:border-wp-background-100">
+      <h1 class="text-xl ml-2 text-wp-text-100">{{ $t('repo.settings.general.general') }}</h1>
     </div>
 
     <form v-if="repoSettings" class="flex flex-col" @submit.prevent="saveRepoSettings">
@@ -11,15 +11,12 @@
       >
         <TextField
           v-model="repoSettings.config_file"
-          class="max-w-124"
           :placeholder="$t('repo.settings.general.pipeline_path.default')"
         />
         <template #description>
-          <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-color-alt">
-            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">{{
-              $t('repo.settings.general.pipeline_path.desc_path_example')
-            }}</span>
-            <span class="bg-gray-300 dark:bg-dark-700 rounded-md px-1">/</span>
+          <i18n-t keypath="repo.settings.general.pipeline_path.desc" tag="p" class="text-sm text-wp-text-alt-100">
+            <span class="code-box-inline px-1">{{ $t('repo.settings.general.pipeline_path.desc_path_example') }}</span>
+            <span class="code-box-inline px-1">/</span>
           </i18n-t>
         </template>
       </InputField>
diff --git a/web/src/components/repo/settings/RegistriesTab.vue b/web/src/components/repo/settings/RegistriesTab.vue
index 9ee7d36be..dc4fb8453 100644
--- a/web/src/components/repo/settings/RegistriesTab.vue
+++ b/web/src/components/repo/settings/RegistriesTab.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('repo.settings.registries.creds') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.registries.creds') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
           {{ $t('repo.settings.registries.desc') }}
           <DocsLink :topic="$t('repo.settings.registries.creds')" url="docs/usage/registries" />
         </p>
@@ -24,8 +24,12 @@
       />
     </div>
 
-    <div v-if="!selectedRegistry" class="space-y-4 text-color">
-      <ListItem v-for="registry in registries" :key="registry.id" class="items-center">
+    <div v-if="!selectedRegistry" class="space-y-4 text-wp-text-100">
+      <ListItem
+        v-for="registry in registries"
+        :key="registry.id"
+        class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+      >
         <span>{{ registry.address }}</span>
         <IconButton
           icon="edit"
@@ -35,7 +39,7 @@
         />
         <IconButton
           icon="trash"
-          class="w-8 h-8 hover:text-red-400 hover:dark:text-red-500"
+          class="w-8 h-8 hover:text-wp-control-error-100"
           :is-loading="isDeleting"
           :title="$t('repo.settings.registries.delete')"
           @click="deleteRegistry(registry)"
diff --git a/web/src/components/repo/settings/SecretsTab.vue b/web/src/components/repo/settings/SecretsTab.vue
index a4ae6e8de..e7e616be6 100644
--- a/web/src/components/repo/settings/SecretsTab.vue
+++ b/web/src/components/repo/settings/SecretsTab.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('repo.settings.secrets.secrets') }}</h1>
-        <p class="text-sm text-color-alt">
+        <h1 class="text-xl text-wp-text-100">{{ $t('repo.settings.secrets.secrets') }}</h1>
+        <p class="text-sm text-wp-text-alt-100">
           {{ $t('repo.settings.secrets.desc') }}
           <DocsLink :topic="$t('repo.settings.secrets.secrets')" url="docs/usage/secrets" />
         </p>
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index 8510ab4ec..9b4a7664f 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -1,15 +1,13 @@
 <template>
-  <div class="space-y-4 text-color">
-    <ListItem v-for="secret in secrets" :key="secret.id" class="items-center">
+  <div class="space-y-4 text-wp-text-100">
+    <ListItem
+      v-for="secret in secrets"
+      :key="secret.id"
+      class="items-center !bg-wp-background-200 !dark:bg-wp-background-100"
+    >
       <span>{{ secret.name }}</span>
-      <div class="ml-auto">
-        <span
-          v-for="event in secret.event"
-          :key="event"
-          class="bg-gray-500 dark:bg-dark-700 dark:text-gray-400 text-white rounded-md mx-1 py-1 px-2 text-sm"
-        >
-          {{ event }}
-        </span>
+      <div class="ml-auto space-x-2">
+        <Badge v-for="event in secret.event" :key="event" :label="event" />
       </div>
       <IconButton
         icon="edit"
@@ -19,7 +17,7 @@
       />
       <IconButton
         icon="trash"
-        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"
         :title="$t('repo.settings.secrets.delete')"
         @click="deleteSecret(secret)"
diff --git a/web/src/compositions/useDarkMode.ts b/web/src/compositions/useDarkMode.ts
index 0188b2df0..c28c4aefb 100644
--- a/web/src/compositions/useDarkMode.ts
+++ b/web/src/compositions/useDarkMode.ts
@@ -7,11 +7,13 @@ watch(isDarkModeActive, (isActive) => {
   if (isActive) {
     document.documentElement.classList.remove('light');
     document.documentElement.classList.add('dark');
-    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2e323e'); // dark-gray-900 (see windi.config.ts)
+    document.documentElement.setAttribute('data-theme', 'dark');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2A2E3A'); // internal-wp-secondary-600 (see windi.config.ts)
   } else {
     document.documentElement.classList.remove('dark');
     document.documentElement.classList.add('light');
-    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#65a30d'); // lime-600
+    document.documentElement.setAttribute('data-theme', 'light');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#369943'); // internal-wp-primary-400
   }
 });
 
diff --git a/web/src/style.css b/web/src/style.css
index e634eb68c..f79285552 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,3 +1,100 @@
+:root,
+:root[data-theme='light'] {
+  --wp-background-100: theme('colors.white');
+  --wp-background-200: theme('colors.gray.100');
+  --wp-background-300: theme('colors.gray.200');
+  --wp-background-400: theme('colors.gray.300');
+
+  --wp-text-100: theme('colors.gray.600');
+  --wp-text-200: theme('colors.gray.700');
+  --wp-text-alt-100: theme('colors.gray.500');
+
+  --wp-primary-100: theme('colors.int-wp-primary.300');
+  --wp-primary-200: theme('colors.int-wp-primary.400');
+  --wp-primary-300: theme('colors.int-wp-primary.500');
+  --wp-primary-text-100: theme('colors.white');
+
+  --wp-control-neutral-100: theme('colors.white');
+  --wp-control-neutral-200: theme('colors.gray.300');
+  --wp-control-neutral-300: theme('colors.gray.400');
+
+  --wp-control-info-100: theme('colors.int-wp-control-info.100');
+  --wp-control-info-200: theme('colors.int-wp-control-info.200');
+  --wp-control-info-300: theme('colors.int-wp-control-info.300');
+
+  --wp-control-ok-100: theme('colors.int-wp-control-ok.100');
+  --wp-control-ok-200: theme('colors.int-wp-control-ok.200');
+  --wp-control-ok-300: theme('colors.int-wp-control-ok.300');
+
+  --wp-control-error-100: theme('colors.int-wp-control-error.100');
+  --wp-control-error-200: theme('colors.int-wp-control-error.200');
+  --wp-control-error-300: theme('colors.int-wp-control-error.300');
+
+  --wp-state-error-100: theme('colors.int-wp-state-error.100');
+  --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
+  --wp-state-ok-100: theme('colors.int-wp-state-ok.100');
+  --wp-state-info-100: theme('colors.int-wp-state-info.100');
+  --wp-state-warn-100: theme('colors.int-wp-state-warn.100');
+
+  --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-text-100: theme('colors.gray.200');
+
+  --wp-link-100: theme('colors.blue.600');
+  --wp-link-200: theme('colors.blue.700');
+}
+
+: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-text-100: theme('colors.gray.300');
+  --wp-text-200: theme('colors.gray.200');
+  --wp-text-alt-100: theme('colors.gray.400');
+
+  --wp-primary-100: theme('colors.int-wp-secondary.300');
+  --wp-primary-200: theme('colors.int-wp-secondary.400');
+  --wp-primary-300: theme('colors.int-wp-secondary.600');
+  --wp-primary-text-100: theme('colors.gray.300');
+
+  --wp-control-neutral-100: theme('colors.int-wp-secondary.300');
+  --wp-control-neutral-200: theme('colors.int-wp-secondary.600');
+  --wp-control-neutral-300: theme('colors.int-wp-secondary.700');
+
+  --wp-control-info-100: theme('colors.int-wp-control-info-dark.100');
+  --wp-control-info-200: theme('colors.int-wp-control-info-dark.200');
+  --wp-control-info-300: theme('colors.int-wp-control-info-dark.300');
+
+  --wp-control-ok-100: theme('colors.int-wp-control-ok-dark.100');
+  --wp-control-ok-200: theme('colors.int-wp-control-ok-dark.200');
+  --wp-control-ok-300: theme('colors.int-wp-control-ok-dark.300');
+
+  --wp-control-error-100: theme('colors.int-wp-control-error-dark.100');
+  --wp-control-error-200: theme('colors.int-wp-control-error-dark.200');
+  --wp-control-error-300: theme('colors.int-wp-control-error-dark.300');
+
+  --wp-state-error-100: theme('colors.int-wp-state-error-dark.100');
+  --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
+  --wp-state-ok-100: theme('colors.int-wp-state-ok-dark.100');
+  --wp-state-info-100: theme('colors.int-wp-state-info-dark.100');
+  --wp-state-warn-100: theme('colors.int-wp-state-warn-dark.100');
+
+  --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-text-100: theme('colors.gray.300');
+
+  --wp-link-100: theme('colors.blue.400');
+  --wp-link-200: theme('colors.blue.500');
+}
+
 html,
 body,
 #app {
@@ -14,11 +111,11 @@ body,
 }
 
 .vue-notification.success {
-  @apply bg-lime-600 border-l-lime-700;
+  @apply !bg-wp-control-ok-100 !border-l-wp-control-ok-300;
 }
 
 .vue-notification.error {
-  @apply bg-red-600 border-l-red-700;
+  @apply !bg-wp-control-error-100 !border-l-wp-control-error-300;
 }
 
 *::-webkit-scrollbar {
@@ -43,10 +140,11 @@ body,
   @apply bg-transparent;
 }
 
-.text-color {
-  @apply text-gray-600 dark:text-gray-400 placeholder-gray-400 dark:placeholder-gray-500;
+.code-box {
+  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  white-space: pre-wrap;
 }
 
-.text-color-alt {
-  @apply text-gray-500 dark:text-gray-500;
+.code-box-inline {
+  @apply bg-wp-code-200 rounded-md text-wp-code-text-100;
 }
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 1f96eb8f3..765504449 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,17 +1,21 @@
 <template>
   <main class="flex flex-col w-full h-full justify-center items-center">
-    <div v-if="errorMessage" class="bg-red-400 text-white dark:text-gray-500 p-4 rounded-md text-lg">
+    <!-- TODO: Should use vue notifications. -->
+    <div
+      v-if="errorMessage"
+      class="bg-wp-control-error-100 border-l-6 border-l-wp-control-error-300 text-white p-4 rounded-md"
+    >
       {{ errorMessage }}
     </div>
 
     <div
-      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700 dark:border-dark-200 md:flex-row md:w-3xl md:h-sm justify-center"
+      class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:border-wp-background-400 md:bg-wp-background-100 md:dark:bg-wp-background-200 md:flex-row md:w-3xl md:h-sm justify-center"
     >
-      <div class="flex md:bg-lime-500 md:dark:bg-lime-900 md:w-3/5 justify-center items-center">
+      <div class="flex md:bg-wp-primary-200 md:dark:bg-wp-primary-300 md:w-3/5 justify-center items-center">
         <img class="w-48 h-48" src="../assets/logo.svg?url" />
       </div>
       <div class="flex flex-col my-8 md:w-2/5 p-4 items-center justify-center">
-        <h1 class="text-xl text-color">{{ $t('welcome') }}</h1>
+        <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
         <Button class="mt-4" @click="doLogin">{{ $t('login') }}</Button>
       </div>
     </div>
diff --git a/web/src/views/RepoAdd.vue b/web/src/views/RepoAdd.vue
index 809d5bef3..bdb552f96 100644
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@@ -11,8 +11,8 @@
         class="items-center"
         :to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
       >
-        <span class="text-color">{{ repo.full_name }}</span>
-        <span v-if="repo.active" class="ml-auto text-color-alt">{{ $t('repo.enable.enabled') }}</span>
+        <span class="text-wp-text-100">{{ repo.full_name }}</span>
+        <span v-if="repo.active" class="ml-auto text-wp-text-alt-100">{{ $t('repo.enable.enabled') }}</span>
         <Button
           v-if="!repo.active"
           class="ml-auto"
diff --git a/web/src/views/Repos.vue b/web/src/views/Repos.vue
index af8990446..91af613de 100644
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@@ -10,7 +10,7 @@
 
     <div class="space-y-4">
       <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
-        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
       </ListItem>
     </div>
   </Scaffold>
diff --git a/web/src/views/User.vue b/web/src/views/User.vue
index 18da271bd..8658e626c 100644
--- a/web/src/views/User.vue
+++ b/web/src/views/User.vue
@@ -7,31 +7,38 @@
 
       <div>
         <div class="flex items-center mb-2">
-          <h2 class="text-lg text-color">{{ $t('user.token') }}</h2>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.token') }}</h2>
           <Button class="ml-4" :text="$t('user.reset_token')" @click="resetToken" />
         </div>
-        <pre class="cli-box">{{ token }}</pre>
+        <pre class="code-box">{{ token }}</pre>
       </div>
 
       <div>
-        <h2 class="text-lg text-color">{{ $t('user.shell_setup') }}</h2>
-        <pre class="cli-box">{{ usageWithShell }}</pre>
+        <h2 class="text-lg text-wp-text-100">{{ $t('user.shell_setup') }}</h2>
+        <pre class="code-box">{{ usageWithShell }}</pre>
       </div>
 
       <div>
         <div class="flex items-center">
-          <h2 class="text-lg text-color">{{ $t('user.api_usage') }}</h2>
-          <a :href="`${address}/swagger/index.html`" target="_blank" class="ml-4 text-link">Swagger UI</a>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.api_usage') }}</h2>
+          <a
+            :href="`${address}/swagger/index.html`"
+            target="_blank"
+            class="ml-4 text-wp-link-100 hover:text-wp-link-200"
+            >Swagger UI</a
+          >
         </div>
-        <pre class="cli-box">{{ usageWithCurl }}</pre>
+        <pre class="code-box">{{ usageWithCurl }}</pre>
       </div>
 
       <div>
         <div class="flex items-center">
-          <h2 class="text-lg text-color">{{ $t('user.cli_usage') }}</h2>
-          <a :href="cliDownload" target="_blank" class="ml-4 text-link">{{ $t('user.dl_cli') }}</a>
+          <h2 class="text-lg text-wp-text-100">{{ $t('user.cli_usage') }}</h2>
+          <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
+            $t('user.dl_cli')
+          }}</a>
         </div>
-        <pre class="cli-box">{{ usageWithCli }}</pre>
+        <pre class="code-box">{{ usageWithCli }}</pre>
       </div>
     </div>
   </Scaffold>
@@ -102,10 +109,3 @@ const resetToken = async () => {
   window.location.href = `${address}/logout`;
 };
 </script>
-
-<style scoped>
-.cli-box {
-  @apply bg-gray-500 p-2 rounded-md text-white break-words dark:bg-dark-400 dark:text-gray-400;
-  white-space: pre-wrap;
-}
-</style>
diff --git a/web/src/views/org/OrgRepos.vue b/web/src/views/org/OrgRepos.vue
index 314cde920..44509d397 100644
--- a/web/src/views/org/OrgRepos.vue
+++ b/web/src/views/org/OrgRepos.vue
@@ -15,11 +15,11 @@
 
     <div class="space-y-4">
       <ListItem v-for="repo in searchedRepos" :key="repo.id" :to="{ name: 'repo', params: { repoId: repo.id } }">
-        <span class="text-color">{{ `${repo.owner} / ${repo.name}` }}</span>
+        <span class="text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</span>
       </ListItem>
     </div>
     <div v-if="(searchedRepos || []).length <= 0" class="text-center">
-      <span class="text-color m-auto">{{ $t('repo.user_none') }}</span>
+      <span class="text-wp-text-100 m-auto">{{ $t('repo.user_none') }}</span>
     </div>
   </Scaffold>
 </template>
diff --git a/web/src/views/repo/RepoBranch.vue b/web/src/views/repo/RepoBranch.vue
index 46f19d965..13fd83a1f 100644
--- a/web/src/views/repo/RepoBranch.vue
+++ b/web/src/views/repo/RepoBranch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full mb-4 justify-center">
-    <span class="text-color text-xl">{{ $t('repo.pipeline.pipelines_for', { branch }) }}</span>
+    <span class="text-wp-text-100 text-xl">{{ $t('repo.pipeline.pipelines_for', { branch }) }}</span>
   </div>
   <PipelineList :pipelines="pipelines" :repo="repo" />
 </template>
diff --git a/web/src/views/repo/RepoBranches.vue b/web/src/views/repo/RepoBranches.vue
index a74d2d997..42d83ebdc 100644
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@@ -3,7 +3,7 @@
     <ListItem
       v-for="branch in branches"
       :key="branch"
-      class="text-color"
+      class="text-wp-text-100"
       :to="{ name: 'repo-branch', params: { branch } }"
     >
       {{ branch }}
diff --git a/web/src/views/repo/RepoPullRequest.vue b/web/src/views/repo/RepoPullRequest.vue
index f2127a106..01ab4fd8b 100644
--- a/web/src/views/repo/RepoPullRequest.vue
+++ b/web/src/views/repo/RepoPullRequest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full mb-4 justify-center">
-    <span class="text-color text-xl">{{ $t('repo.pipeline.pipelines_for_pr', { index: pullRequest }) }}</span>
+    <span class="text-wp-text-100 text-xl">{{ $t('repo.pipeline.pipelines_for_pr', { index: pullRequest }) }}</span>
   </div>
   <PipelineList :pipelines="pipelines" :repo="repo" />
 </template>
diff --git a/web/src/views/repo/RepoPullRequests.vue b/web/src/views/repo/RepoPullRequests.vue
index a384d1c63..3a76cb9c1 100644
--- a/web/src/views/repo/RepoPullRequests.vue
+++ b/web/src/views/repo/RepoPullRequests.vue
@@ -3,12 +3,12 @@
     <ListItem
       v-for="pullRequest in pullRequests"
       :key="pullRequest.index"
-      class="text-color"
+      class="text-wp-text-100"
       :to="{ name: 'repo-pull-request', params: { pullRequest: pullRequest.index } }"
     >
-      <span class="text-color-alt <md:hidden">#{{ pullRequest.index }}</span>
-      <span class="text-color-alt <md:hidden mx-2">-</span>
-      <span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
+      <span class="text-wp-text-alt-100 <md:hidden">#{{ pullRequest.index }}</span>
+      <span class="text-wp-text-alt-100 <md:hidden mx-2">-</span>
+      <span class="text-wp-text-100 <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
         pullRequest.title
       }}</span>
     </ListItem>
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index cf03c1a71..eef79560e 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -10,13 +10,13 @@
 
       <div class="flex flex-grow relative">
         <div v-if="error" class="flex flex-col p-4">
-          <span class="text-red-400 font-bold text-xl mb-2">{{ $t('repo.pipeline.execution_error') }}</span>
-          <span class="text-red-400">{{ error }}</span>
+          <span class="text-wp-state-error-100 font-bold text-xl mb-2">{{ $t('repo.pipeline.execution_error') }}</span>
+          <span class="text-wp-state-error-100">{{ error }}</span>
         </div>
 
         <div v-else-if="pipeline.status === 'blocked'" class="flex flex-col flex-grow justify-center items-center p-2">
-          <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
-          <p class="text-xl text-color mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
+          <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
+          <p class="text-xl text-wp-text-100 mb-4">{{ $t('repo.pipeline.protected.awaits') }}</p>
           <div v-if="repoPermissions.push" class="flex space-x-4">
             <Button
               color="green"
@@ -34,8 +34,8 @@
         </div>
 
         <div v-else-if="pipeline.status === 'declined'" class="flex flex-col flex-grow justify-center items-center">
-          <Icon name="status-blocked" class="w-16 h-16 text-color mb-4" />
-          <p class="text-xl text-color">{{ $t('repo.pipeline.protected.declined') }}</p>
+          <Icon name="status-blocked" class="w-16 h-16 text-wp-text-100 mb-4" />
+          <p class="text-xl text-wp-text-100">{{ $t('repo.pipeline.protected.declined') }}</p>
         </div>
 
         <PipelineLog
diff --git a/web/src/views/repo/pipeline/PipelineChangedFiles.vue b/web/src/views/repo/pipeline/PipelineChangedFiles.vue
index f02ced363..b6a95ce6c 100644
--- a/web/src/views/repo/pipeline/PipelineChangedFiles.vue
+++ b/web/src/views/repo/pipeline/PipelineChangedFiles.vue
@@ -1,7 +1,7 @@
 <template>
   <Panel v-if="pipeline">
     <div v-if="pipeline.changed_files === undefined || pipeline.changed_files.length < 1" class="w-full">
-      <span class="text-color">{{ $t('repo.pipeline.no_files') }}</span>
+      <span class="text-wp-text-100">{{ $t('repo.pipeline.no_files') }}</span>
     </div>
     <div v-for="file in pipeline.changed_files" v-else :key="file" class="w-full">
       <div>- {{ file }}</div>
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index bfaed74c0..72ec80508 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -46,7 +46,7 @@
       </template>
 
       <template #tabActions>
-        <div class="flex justify-between gap-x-4 text-color flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
+        <div class="flex justify-between gap-x-4 text-wp-text-100 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
           <div class="flex space-x-1 items-center flex-shrink-0">
             <Icon name="since" />
             <Tooltip>
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 80c1474f8..ec6443954 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -1,20 +1,204 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import tinycolor from 'tinycolor2';
 import colors from 'windicss/colors';
 import { defineConfig } from 'windicss/helpers';
 import typography from 'windicss/plugin/typography';
 
+const customColors = {
+  'wp-primary': {
+    100: '#8AD97F',
+    200: '#68C464',
+    300: '#4CAF50',
+    400: '#369943',
+    500: '#248438',
+    600: '#166E30',
+  },
+  'wp-secondary': {
+    200: '#434858',
+    300: '#383C4A',
+    400: '#303440',
+    500: '#2D313D',
+    600: '#2A2E3A',
+    700: '#222631',
+    800: '#1B1F28',
+  },
+};
+
 export default defineConfig({
   darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        greenish: '#4caf50',
-        link: colors.blue[400],
-        'dark-gray': {
-          600: '#383c4a',
-          700: '#303440',
-          800: '#2a2e3a',
-          900: '#2e323e',
+        // Internals to keep a single source for color definitions
+        'int-wp-primary': {
+          100: customColors['wp-primary'][100],
+          200: customColors['wp-primary'][200],
+          300: customColors['wp-primary'][300],
+          400: customColors['wp-primary'][400],
+          500: customColors['wp-primary'][500],
+          600: customColors['wp-primary'][600],
+        },
+        'int-wp-secondary': {
+          200: customColors['wp-secondary'][200],
+          300: customColors['wp-secondary'][300],
+          400: customColors['wp-secondary'][400],
+          500: customColors['wp-secondary'][500],
+          600: customColors['wp-secondary'][600],
+          700: customColors['wp-secondary'][700],
+          800: customColors['wp-secondary'][800],
+        },
+
+        'int-wp-control-neutral': {
+          100: colors.white,
+          200: colors.gray[300],
+          300: colors.gray[400],
+        },
+        'int-wp-control-info': {
+          100: colors.cyan[700],
+          200: colors.cyan[800],
+          300: colors.cyan[900],
+        },
+        'int-wp-control-info-dark': {
+          100: tinycolor(colors.cyan[700]).desaturate(30).toString(),
+          200: tinycolor(colors.cyan[800]).desaturate(30).toString(),
+          300: tinycolor(colors.cyan[900]).desaturate(30).toString(),
+        },
+        'int-wp-control-ok': {
+          100: customColors['wp-primary'][400],
+          200: customColors['wp-primary'][500],
+          300: customColors['wp-primary'][600],
+        },
+        'int-wp-control-ok-dark': {
+          100: tinycolor(customColors['wp-primary'][400]).desaturate(10).toString(),
+          200: tinycolor(customColors['wp-primary'][500]).desaturate(10).toString(),
+          300: tinycolor(customColors['wp-primary'][600]).desaturate(10).toString(),
+        },
+        'int-wp-control-error': {
+          100: colors.red[700],
+          200: colors.red[800],
+          300: colors.red[900],
+        },
+        'int-wp-control-error-dark': {
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+          200: tinycolor(colors.red[800]).desaturate(25).toString(),
+          300: tinycolor(colors.red[900]).desaturate(25).toString(),
+        },
+
+        'int-wp-state-error': {
+          100: colors.red[700],
+        },
+        'int-wp-state-error-dark': {
+          100: tinycolor(colors.red[700]).desaturate(25).toString(),
+        },
+        'int-wp-state-neutral': {
+          100: colors.gray[600],
+        },
+        'int-wp-state-ok': {
+          100: colors.green[600],
+        },
+        'int-wp-state-ok-dark': {
+          100: tinycolor(colors.green[600]).desaturate(20).toString(),
+        },
+        'int-wp-state-info': {
+          100: colors.cyan[600],
+        },
+        'int-wp-state-info-dark': {
+          100: tinycolor(colors.cyan[600]).desaturate(20).toString(),
+        },
+        'int-wp-state-warn': {
+          100: colors.yellow[400],
+        },
+        'int-wp-state-warn-dark': {
+          100: tinycolor(colors.yellow[400]).desaturate(20).toString(),
+        },
+
+        'int-wp-hint-warn': {
+          100: colors.yellow[100],
+          200: colors.yellow[300],
+        },
+        'int-wp-hint-warn-dark': {
+          100: tinycolor(colors.yellow[300]).desaturate(60).toString(),
+          200: tinycolor(colors.yellow[500]).desaturate(60).toString(),
+        },
+
+        // Theme colors
+        'wp-background': {
+          100: 'var(--wp-background-100)',
+          200: 'var(--wp-background-200)',
+          300: 'var(--wp-background-300)',
+          400: 'var(--wp-background-400)',
+        },
+
+        'wp-text': {
+          100: 'var(--wp-text-100)',
+          200: 'var(--wp-text-200)',
+        },
+        'wp-text-alt': {
+          100: 'var(--wp-text-alt-100)',
+        },
+
+        'wp-primary': {
+          100: 'var(--wp-primary-100)',
+          200: 'var(--wp-primary-200)',
+          300: 'var(--wp-primary-300)',
+        },
+        'wp-primary-text': {
+          100: 'var(--wp-primary-text-100)',
+        },
+
+        'wp-control-neutral': {
+          100: 'var(--wp-control-neutral-100)',
+          200: 'var(--wp-control-neutral-200)',
+          300: 'var(--wp-control-neutral-300)',
+        },
+        'wp-control-info': {
+          100: 'var(--wp-control-info-100)',
+          200: 'var(--wp-control-info-200)',
+          300: 'var(--wp-control-info-300)',
+        },
+        'wp-control-ok': {
+          100: 'var(--wp-control-ok-100)',
+          200: 'var(--wp-control-ok-200)',
+          300: 'var(--wp-control-ok-300)',
+        },
+        'wp-control-error': {
+          100: 'var(--wp-control-error-100)',
+          200: 'var(--wp-control-error-200)',
+          300: 'var(--wp-control-error-300)',
+        },
+
+        'wp-state-error': {
+          100: 'var(--wp-state-error-100)',
+        },
+        'wp-state-neutral': {
+          100: 'var(--wp-state-neutral-100)',
+        },
+        'wp-state-ok': {
+          100: 'var(--wp-state-ok-100)',
+        },
+        'wp-state-info': {
+          100: 'var(--wp-state-info-100)',
+        },
+        'wp-state-warn': {
+          100: 'var(--wp-state-warn-100)',
+        },
+
+        'wp-hint-warn': {
+          100: 'var(--wp-hint-warn-100)',
+          200: 'var(--wp-hint-warn-200)',
+        },
+
+        'wp-code': {
+          100: 'var(--wp-code-100)',
+          200: 'var(--wp-code-200)',
+        },
+        'wp-code-text': {
+          100: 'var(--wp-code-text-100)',
+        },
+
+        'wp-link': {
+          100: 'var(--wp-link-100)',
+          200: 'var(--wp-link-200)',
         },
       },
       transitionProperty: {
@@ -39,5 +223,5 @@ export default defineConfig({
     'hover-effect':
       'hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5 transition-colors duration-100',
   },
-  plugins: [typography],
+  plugins: [typography()],
 });