From 981d5fc55b9248bf25e83e2eb39cee5f9cd0324e Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Fri, 14 Feb 2025 09:12:16 +0200
Subject: [PATCH] fix(deps): update dependency tailwindcss to v4 - abandoned
 (#4778)

Co-authored-by: qwerty287 <qwerty287@posteo.de>
Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>
---
 web/.prettierignore                           |    1 +
 web/package.json                              |    7 +-
 web/pnpm-lock.yaml                            |  336 +-----
 web/postcss.config.js                         |    7 -
 web/src/App.vue                               |    6 +-
 .../admin/settings/queue/AdminQueueStats.vue  |   10 +-
 web/src/components/agent/AgentList.vue        |    6 +-
 web/src/components/atomic/Badge.vue           |    4 +-
 web/src/components/atomic/Button.vue          |   12 +-
 web/src/components/atomic/CountBadge.vue      |    2 +-
 web/src/components/atomic/DocsLink.vue        |    4 +-
 web/src/components/atomic/Error.vue           |    2 +-
 web/src/components/atomic/IconButton.vue      |    4 +-
 web/src/components/atomic/ListItem.vue        |    4 +-
 web/src/components/atomic/Warning.vue         |    4 +-
 web/src/components/form/Checkbox.vue          |    9 +-
 web/src/components/form/InputField.vue        |    6 +-
 web/src/components/form/KeyValueEditor.vue    |    2 +-
 web/src/components/form/RadioField.vue        |    9 +-
 web/src/components/form/SelectField.vue       |    2 +-
 web/src/components/form/TextField.vue         |    4 +-
 web/src/components/layout/Panel.vue           |    8 +-
 web/src/components/layout/Popup.vue           |    2 +-
 web/src/components/layout/Settings.vue        |    6 +-
 .../layout/header/ActivePipelines.vue         |   17 +-
 web/src/components/layout/header/Navbar.vue   |   10 +-
 .../layout/popups/DeployPipelinePopup.vue     |    4 +-
 web/src/components/layout/scaffold/Header.vue |   10 +-
 web/src/components/layout/scaffold/Tabs.vue   |   18 +-
 .../pipeline-feed/PipelineFeedItem.vue        |    4 +-
 .../pipeline-feed/PipelineFeedSidebar.vue     |    6 +-
 web/src/components/registry/RegistryList.vue  |    6 +-
 web/src/components/repo/RepoItem.vue          |   14 +-
 .../components/repo/pipeline/PipelineItem.vue |   14 +-
 .../components/repo/pipeline/PipelineLog.vue  |   50 +-
 .../repo/pipeline/PipelineRunningIcon.vue     |    2 +
 .../repo/pipeline/PipelineStepList.vue        |   32 +-
 web/src/components/secrets/SecretEdit.vue     |    2 +-
 web/src/components/secrets/SecretList.vue     |    6 +-
 web/src/style.css                             |  172 +--
 web/src/tailwind.css                          | 1068 ++++++++++++++++-
 web/src/views/Login.vue                       |   10 +-
 web/src/views/RepoAdd.vue                     |    4 +-
 web/src/views/Repos.vue                       |    4 +-
 web/src/views/admin/AdminInfo.vue             |    2 +-
 web/src/views/admin/AdminOrgs.vue             |    6 +-
 web/src/views/admin/AdminQueue.vue            |    4 +-
 web/src/views/admin/AdminRepos.vue            |    4 +-
 web/src/views/admin/AdminUsers.vue            |    6 +-
 web/src/views/cli/Auth.vue                    |    2 +-
 web/src/views/org/OrgRepos.vue                |    2 +-
 web/src/views/repo/RepoBranch.vue             |    2 +-
 web/src/views/repo/RepoBranches.vue           |    2 +-
 web/src/views/repo/RepoManualPipeline.vue     |    6 +-
 web/src/views/repo/RepoPullRequest.vue        |    2 +-
 web/src/views/repo/RepoPullRequests.vue       |    8 +-
 web/src/views/repo/pipeline/Pipeline.vue      |   12 +-
 .../views/repo/pipeline/PipelineConfig.vue    |    2 +-
 web/src/views/repo/pipeline/PipelineDebug.vue |    4 +-
 .../views/repo/pipeline/PipelineErrors.vue    |    6 +-
 .../views/repo/pipeline/PipelineWrapper.vue   |   16 +-
 web/src/views/repo/settings/Crons.vue         |    6 +-
 web/src/views/repo/settings/General.vue       |    2 +-
 web/src/views/user/UserCLIAndAPI.vue          |    4 +-
 web/tailwind.config.ts                        |  237 ----
 web/tsconfig.json                             |   10 +-
 web/vite.config.ts                            |    2 +
 67 files changed, 1371 insertions(+), 886 deletions(-)
 delete mode 100644 web/postcss.config.js
 delete mode 100644 web/tailwind.config.ts

diff --git a/web/.prettierignore b/web/.prettierignore
index 2087370c5..eb6da1b3b 100644
--- a/web/.prettierignore
+++ b/web/.prettierignore
@@ -1,3 +1,4 @@
+.pnpm-store/
 pnpm-lock.yaml
 dist
 coverage/
diff --git a/web/package.json b/web/package.json
index 4a68977c3..b710e7710 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,12 +20,10 @@
   "dependencies": {
     "@kyvg/vue3-notification": "^3.4.1",
     "@mdi/js": "^7.4.47",
-    "@tailwindcss/postcss": "4.0.5",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "4.0.5",
     "@vueuse/core": "^12.3.0",
     "ansi_up": "^6.0.2",
-    "autoprefixer": "^10.4.20",
     "dompurify": "^3.2.3",
     "fuse.js": "^7.0.0",
     "js-base64": "^3.7.7",
@@ -33,12 +31,11 @@
     "marked": "^15.0.5",
     "node-emoji": "^2.2.0",
     "pinia": "^2.3.0",
-    "postcss": "^8.4.49",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "prismjs": "^1.29.0",
     "semver": "^7.6.3",
     "simple-icons": "^14.1.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.6",
     "vue": "^3.5.13",
     "vue-i18n": "^11.0.1",
     "vue-router": "^4.5.0"
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 7daac6b1d..061ef2097 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -17,12 +17,9 @@ importers:
       '@mdi/js':
         specifier: ^7.4.47
         version: 7.4.47
-      '@tailwindcss/postcss':
-        specifier: 4.0.5
-        version: 4.0.5
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3)))
+        version: 0.5.16(tailwindcss@4.0.6)
       '@tailwindcss/vite':
         specifier: 4.0.5
         version: 4.0.5(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(stylus@0.57.0)(yaml@2.7.0))
@@ -32,9 +29,6 @@ importers:
       ansi_up:
         specifier: ^6.0.2
         version: 6.0.2
-      autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.20(postcss@8.5.1)
       dompurify:
         specifier: ^3.2.3
         version: 3.2.4
@@ -56,11 +50,8 @@ importers:
       pinia:
         specifier: ^2.3.0
         version: 2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
-      postcss:
-        specifier: ^8.4.49
-        version: 8.5.1
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.9
+        specifier: ^0.6.11
         version: 0.6.11(@ianvs/prettier-plugin-sort-imports@4.4.1(@vue/compiler-sfc@3.5.13)(prettier@3.5.0))(prettier@3.5.0)
       prismjs:
         specifier: ^1.29.0
@@ -72,8 +63,8 @@ importers:
         specifier: ^14.1.0
         version: 14.6.0
       tailwindcss:
-        specifier: ^3.4.17
-        version: 3.4.17(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3))
+        specifier: ^4.0.6
+        version: 4.0.6
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -168,10 +159,6 @@ importers:
 
 packages:
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -901,9 +888,6 @@ packages:
     resolution: {integrity: sha512-iWGyOCu0TuzvCBisWbGv2K9+7QCfE0ztgtrZOvb9iF7V7ChVkD15Obe3HevZrhjngAc34jDA+OMSuSvkrpTy4A==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/postcss@4.0.5':
-    resolution: {integrity: sha512-U7IPb+KMASETtUvISwePM+1h+jLQspXf2ncfX/LmP/4AaH7b7DJQhqXzDCaJQd/MIh54dRUO93i9q4+Xm7dlVg==}
-
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
@@ -1188,13 +1172,6 @@ packages:
   ansi_up@6.0.2:
     resolution: {integrity: sha512-3G3vKvl1ilEp7J1u6BmULpMA0xVoW/f4Ekqhl8RTrJrhEBkonKn5k3bUc5Xt+qDayA6iDX0jyUh3AbZjB/l0tw==}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
   are-docs-informative@0.0.2:
     resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
@@ -1202,9 +1179,6 @@ packages:
   arg@4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -1220,13 +1194,6 @@ packages:
     engines: {node: '>= 4.5.0'}
     hasBin: true
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   babel-plugin-prismjs@2.1.0:
     resolution: {integrity: sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==}
     peerDependencies:
@@ -1235,10 +1202,6 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -1269,10 +1232,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   caniuse-lite@1.0.30001696:
     resolution: {integrity: sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==}
 
@@ -1298,10 +1257,6 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   ci-info@4.1.0:
     resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
@@ -1329,10 +1284,6 @@ packages:
     resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
     engines: {node: '>=14'}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -1454,16 +1405,10 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
@@ -1806,9 +1751,6 @@ packages:
     resolution: {integrity: sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==}
     engines: {node: '>= 6'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1937,10 +1879,6 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
   is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
@@ -1977,10 +1915,6 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
-    hasBin: true
-
   jiti@2.4.2:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
@@ -2118,10 +2052,6 @@ packages:
     resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
     engines: {node: '>= 12.0.0'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -2345,9 +2275,6 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2375,28 +2302,12 @@ packages:
   normalize-package-data@2.5.0:
     resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
 
-  normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
-    engines: {node: '>=0.10.0'}
-
-  normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
   nwsapi@2.2.16:
     resolution: {integrity: sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==}
 
-  object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
@@ -2492,10 +2403,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pinia@2.3.1:
     resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
     peerDependencies:
@@ -2505,10 +2412,6 @@ packages:
       typescript:
         optional: true
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -2516,36 +2419,6 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-safe-parser@6.0.0:
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
@@ -2570,9 +2443,6 @@ packages:
     resolution: {integrity: sha512-8I7Cd8sxiEITIp32xBK4K/Aj1ukX6vuWnx8oY/oAH35NfQI4OZaY5nd68Yx8HeN5S49uhQ6DL0rNk0ZBu/TaLg==}
     engines: {node: ^8.10.0 || ^10.13.0 || ^11.10.1 || >=12.13.0}
 
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
   postcss@8.5.1:
     resolution: {integrity: sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -2655,9 +2525,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -2666,10 +2533,6 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   refa@0.12.1:
     resolution: {integrity: sha512-J8rn6v4DBb2nnFqkqwy6/NnTYMcgLA+sLr0iIO41qpv0n+ngb7ksag2tMRl0inb1bbO/esUwzW1vbJi7K0sI0g==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -2836,11 +2699,6 @@ packages:
     resolution: {integrity: sha512-yOI6G8WYfr0q8v8rRvE91wbxFU+rJPo760Va4MF6K0I6BZjO4r+xSynkvyPBP9tV1CIEUeRsiidjIs2rzb1CnQ==}
     hasBin: true
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2865,25 +2723,16 @@ packages:
     resolution: {integrity: sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==}
     engines: {node: ^14.18.0 || >=16.0.0}
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   tailwindcss@4.0.5:
     resolution: {integrity: sha512-DZZIKX3tA23LGTjHdnwlJOTxfICD1cPeykLLsYF1RQBI9QsCR3i0szohJfJDVjr6aNRAIio5WVO7FGB77fRHwg==}
 
+  tailwindcss@4.0.6:
+    resolution: {integrity: sha512-mysewHYJKaXgNOW6pp5xon/emCsfAMnO8WMaGKZZ35fomnR/T5gYnRg2/yRTTrtXiEl1tiVkeRt0eMO6HxEZqw==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
@@ -2934,9 +2783,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   ts-node@10.9.2:
     resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
     hasBin: true
@@ -3257,8 +3103,6 @@ packages:
 
 snapshots:
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -3936,22 +3780,13 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.0.5
       '@tailwindcss/oxide-win32-x64-msvc': 4.0.5
 
-  '@tailwindcss/postcss@4.0.5':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.0.5
-      '@tailwindcss/oxide': 4.0.5
-      lightningcss: 1.29.1
-      postcss: 8.5.1
-      tailwindcss: 4.0.5
-
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3)))':
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.6)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3))
+      tailwindcss: 4.0.6
 
   '@tailwindcss/vite@4.0.5(vite@6.1.0(@types/node@22.13.1)(jiti@2.4.2)(lightningcss@1.29.1)(stylus@0.57.0)(yaml@2.7.0))':
     dependencies:
@@ -4290,19 +4125,10 @@ snapshots:
 
   ansi_up@6.0.2: {}
 
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
   are-docs-informative@0.0.2: {}
 
   arg@4.1.3: {}
 
-  arg@5.0.2: {}
-
   argparse@2.0.1: {}
 
   assertion-error@2.0.1: {}
@@ -4311,24 +4137,12 @@ snapshots:
 
   atob@2.1.2: {}
 
-  autoprefixer@10.4.20(postcss@8.5.1):
-    dependencies:
-      browserslist: 4.24.4
-      caniuse-lite: 1.0.30001696
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-value-parser: 4.2.0
-
   babel-plugin-prismjs@2.1.0(prismjs@1.29.0):
     dependencies:
       prismjs: 1.29.0
 
   balanced-match@1.0.2: {}
 
-  binary-extensions@2.3.0: {}
-
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.11:
@@ -4357,8 +4171,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   caniuse-lite@1.0.30001696: {}
 
   ccount@2.0.1: {}
@@ -4382,18 +4194,6 @@ snapshots:
 
   check-error@2.1.1: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   ci-info@4.1.0: {}
 
   clean-regexp@1.0.0:
@@ -4418,8 +4218,6 @@ snapshots:
 
   commander@10.0.1: {}
 
-  commander@4.1.1: {}
-
   commander@7.2.0: {}
 
   comment-parser@1.4.1: {}
@@ -4523,12 +4321,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff@4.0.2: {}
 
-  dlv@1.1.3: {}
-
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -4999,8 +4793,6 @@ snapshots:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
-  fraction.js@4.3.7: {}
-
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -5114,10 +4906,6 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
   is-builtin-module@3.2.1:
     dependencies:
       builtin-modules: 3.3.0
@@ -5150,8 +4938,6 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.7: {}
-
   jiti@2.4.2: {}
 
   js-base64@3.7.7: {}
@@ -5277,8 +5063,6 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.29.1
       lightningcss-win32-x64-msvc: 1.29.1
 
-  lilconfig@3.1.3: {}
-
   lines-and-columns@1.2.4: {}
 
   local-pkg@1.0.0:
@@ -5661,12 +5445,6 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.8: {}
 
   natural-compare@1.4.0: {}
@@ -5693,20 +5471,12 @@ snapshots:
       semver: 7.7.1
       validate-npm-package-license: 3.0.4
 
-  normalize-path@3.0.0: {}
-
-  normalize-range@0.1.2: {}
-
   nth-check@2.1.1:
     dependencies:
       boolbase: 1.0.0
 
   nwsapi@2.2.16: {}
 
-  object-assign@4.1.1: {}
-
-  object-hash@3.0.0: {}
-
   once@1.4.0:
     dependencies:
       wrappy: 1.0.2
@@ -5791,8 +5561,6 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pify@2.3.0: {}
-
   pinia@2.3.1(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
@@ -5803,8 +5571,6 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  pirates@4.0.6: {}
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -5813,31 +5579,6 @@ snapshots:
 
   pluralize@8.0.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.5.1):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.1
-
-  postcss-load-config@4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.7.0
-    optionalDependencies:
-      postcss: 8.5.1
-      ts-node: 10.9.2(@types/node@22.13.1)(typescript@5.7.3)
-
-  postcss-nested@6.2.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-selector-parser: 6.1.2
-
   postcss-safe-parser@6.0.0(postcss@8.5.1):
     dependencies:
       postcss: 8.5.1
@@ -5866,8 +5607,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  postcss-value-parser@4.2.0: {}
-
   postcss@8.5.1:
     dependencies:
       nanoid: 3.3.8
@@ -5892,10 +5631,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -5909,10 +5644,6 @@ snapshots:
       parse-json: 5.2.0
       type-fest: 0.6.0
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   refa@0.12.1:
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -6084,16 +5815,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -6121,45 +5842,12 @@ snapshots:
       '@pkgr/core': 0.1.1
       tslib: 2.8.1
 
-  tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-import: 15.1.0(postcss@8.5.1)
-      postcss-js: 4.0.1(postcss@8.5.1)
-      postcss-load-config: 4.0.2(postcss@8.5.1)(ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3))
-      postcss-nested: 6.2.0(postcss@8.5.1)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@4.0.5: {}
 
+  tailwindcss@4.0.6: {}
+
   tapable@2.2.1: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   tinybench@2.9.0: {}
 
   tinycolor2@1.6.0: {}
@@ -6198,8 +5886,6 @@ snapshots:
     dependencies:
       typescript: 5.7.3
 
-  ts-interface-checker@0.1.13: {}
-
   ts-node@10.9.2(@types/node@22.13.1)(typescript@5.7.3):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
diff --git a/web/postcss.config.js b/web/postcss.config.js
deleted file mode 100644
index b0c6b4904..000000000
--- a/web/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// postcss.config.js
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/web/src/App.vue b/web/src/App.vue
index 61b22843c..36995f3c7 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="app m-auto flex h-full w-full flex-col bg-wp-background-200 dark:bg-wp-background-100">
+  <div class="app bg-wp-background-200 dark:bg-wp-background-100 m-auto flex h-full w-full flex-col">
     <router-view v-if="blank" />
     <template v-else>
       <Navbar />
       <main class="relative flex h-full min-h-0">
-        <div id="scroll-component" class="flex flex-grow flex-col overflow-y-auto">
+        <div id="scroll-component" class="flex grow flex-col overflow-y-auto">
           <router-view />
         </div>
         <transition name="slide-right">
-          <PipelineFeedSidebar class="absolute bottom-0 right-0 top-0 w-full max-w-80 border-l shadow-md xl:max-w-96" />
+          <PipelineFeedSidebar class="absolute top-0 right-0 bottom-0 w-full max-w-80 border-l shadow-md xl:max-w-96" />
         </transition>
       </main>
     </template>
diff --git a/web/src/components/admin/settings/queue/AdminQueueStats.vue b/web/src/components/admin/settings/queue/AdminQueueStats.vue
index 7c5edb897..6e0eef55c 100644
--- a/web/src/components/admin/settings/queue/AdminQueueStats.vue
+++ b/web/src/components/admin/settings/queue/AdminQueueStats.vue
@@ -1,17 +1,17 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="w-full rounded-md border border-wp-background-300 bg-wp-background-200 px-5 py-5 text-wp-text-100 dark:bg-wp-background-100"
+      class="border-wp-background-300 bg-wp-background-200 text-wp-text-100 dark:bg-wp-background-100 w-full rounded-md border px-5 py-5"
     >
       <div class="flex w-full">
-        <h3 class="flex-1 text-lg font-semibold uppercase leading-tight">
+        <h3 class="flex-1 text-lg leading-tight font-semibold uppercase">
           {{ $t('admin.settings.queue.stats.completed_count') }}
         </h3>
       </div>
       <div class="relative overflow-hidden transition-all duration-500">
         <div>
           <div class="pb-4 lg:pb-6">
-            <h4 class="inline-block text-2xl font-semibold leading-tight lg:text-3xl">
+            <h4 class="inline-block text-2xl leading-tight font-semibold lg:text-3xl">
               {{ stats.completed_count }}
             </h4>
           </div>
@@ -33,9 +33,9 @@
               v-for="(item, index) in data"
               :key="item.key"
               class="px-4 sm:w-full md:w-1/4"
-              :class="{ 'border-gray-300 dark:border-gray-600 md:border-l': index !== 0 }"
+              :class="{ 'border-gray-300 md:border-l dark:border-gray-600': index !== 0 }"
             >
-              <div class="overflow-hidden text-ellipsis whitespace-nowrap text-sm">
+              <div class="overflow-hidden text-sm text-ellipsis whitespace-nowrap">
                 <span class="mr-1 inline-block h-2 w-2 rounded-full align-middle" :class="`${item.color}`">&nbsp;</span>
                 <span class="align-middle">{{ item.label }}</span>
               </div>
diff --git a/web/src/components/agent/AgentList.vue b/web/src/components/agent/AgentList.vue
index 72076a57c..cbe01b889 100644
--- a/web/src/components/agent/AgentList.vue
+++ b/web/src/components/agent/AgentList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div v-if="!props.loading" class="space-y-4 text-wp-text-100">
+  <div v-if="!props.loading" class="text-wp-text-100 space-y-4">
     <ListItem
       v-for="agent in props.agents"
       :key="agent.id"
-      class="items-center !bg-wp-background-200 dark:!bg-wp-background-100"
+      class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
@@ -30,7 +30,7 @@
       <IconButton
         icon="trash"
         :title="$t('admin.settings.agents.delete_agent')"
-        class="ml-2 h-8 w-8 hover:text-wp-error-100"
+        class="hover:text-wp-error-100 ml-2 h-8 w-8"
         :is-loading="props.isDeleting"
         @click="$emit('delete', agent)"
       />
diff --git a/web/src/components/atomic/Badge.vue b/web/src/components/atomic/Badge.vue
index 9e13ee986..6085bfcab 100644
--- a/web/src/components/atomic/Badge.vue
+++ b/web/src/components/atomic/Badge.vue
@@ -1,7 +1,7 @@
 <template>
   <span class="inline-flex text-xs font-medium">
     <span
-      class="flex items-center rounded-l-full border-2 border-wp-state-neutral-100 bg-wp-state-neutral-100 py-0.5 pl-2 pr-1 text-gray-300"
+      class="border-wp-state-neutral-100 bg-wp-state-neutral-100 flex items-center rounded-l-full border-2 py-0.5 pr-1 pl-2 text-gray-300"
       :class="{
         'rounded-r-full pr-2': value === undefined,
       }"
@@ -10,7 +10,7 @@
     </span>
     <span
       v-if="value !== undefined"
-      class="flex items-center rounded-r-full border-2 border-wp-state-neutral-100 py-0.5 pl-1 pr-2"
+      class="border-wp-state-neutral-100 flex items-center rounded-r-full border-2 py-0.5 pr-2 pl-1"
     >
       {{ value }}
     </span>
diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 352498c5b..7599a03ca 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -2,25 +2,25 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="relative flex flex-shrink-0 cursor-pointer items-center overflow-hidden whitespace-nowrap rounded-md border px-2 py-1 shadow-sm transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
+    class="relative flex shrink-0 cursor-pointer items-center overflow-hidden rounded-md border px-2 py-1 whitespace-nowrap shadow-xs transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50"
     :class="{
       'border-wp-control-neutral-300 bg-wp-control-neutral-100 text-wp-text-100 hover:bg-wp-control-neutral-200':
         color === 'gray',
-      'border-wp-control-ok-300 bg-wp-control-ok-100 text-white hover:bg-wp-control-ok-200': color === 'green',
-      'border-wp-control-info-300 bg-wp-control-info-100 text-white hover:bg-wp-control-info-200': color === 'blue',
-      'border-wp-error-300 bg-wp-error-100 text-white hover:bg-wp-error-200': color === 'red',
+      'border-wp-control-ok-300 bg-wp-control-ok-100 hover:bg-wp-control-ok-200 text-white': color === 'green',
+      'border-wp-control-info-300 bg-wp-control-info-100 hover:bg-wp-control-info-200 text-white': color === 'blue',
+      'border-wp-error-300 bg-wp-error-100 hover:bg-wp-error-200 text-white': color === 'red',
       ...passedClasses,
     }"
     :title="title"
     :disabled="disabled"
   >
     <slot>
-      <Icon v-if="startIcon" :name="startIcon" class="!h-5 !w-5" :class="{ invisible: isLoading, 'mr-1': text }" />
+      <Icon v-if="startIcon" :name="startIcon" class="h-5! w-5!" :class="{ invisible: isLoading, 'mr-1': text }" />
       <span :class="{ invisible: isLoading }">{{ text }}</span>
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 h-6 w-6" :class="{ invisible: isLoading }" />
       <div
         v-if="isLoading"
-        class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center"
+        class="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center"
         :class="{
           'bg-wp-control-neutral-200': color === 'gray',
           'bg-wp-control-ok-200': color === 'green',
diff --git a/web/src/components/atomic/CountBadge.vue b/web/src/components/atomic/CountBadge.vue
index 45551e2d6..bf42a0aa5 100644
--- a/web/src/components/atomic/CountBadge.vue
+++ b/web/src/components/atomic/CountBadge.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="inline-block min-w-5 rounded-full bg-wp-background-300 px-1.5 py-0.5 text-center text-xs font-bold leading-4 text-wp-text-100 dark:bg-wp-background-100"
+    class="bg-wp-background-300 text-wp-text-100 dark:bg-wp-background-100 inline-block min-w-5 rounded-full px-1.5 py-0.5 text-center text-xs leading-4 font-bold"
   >
     {{ value }}
   </span>
diff --git a/web/src/components/atomic/DocsLink.vue b/web/src/components/atomic/DocsLink.vue
index 8e29cd5ab..0f0a92e1c 100644
--- a/web/src/components/atomic/DocsLink.vue
+++ b/web/src/components/atomic/DocsLink.vue
@@ -3,9 +3,9 @@
     :href="`${docsUrl}`"
     :title="$t('documentation_for', { topic })"
     target="_blank"
-    class="cursor-pointer text-wp-link-100 hover:text-wp-link-200"
+    class="text-wp-link-100 hover:text-wp-link-200 cursor-pointer"
   >
-    <Icon name="question" class="!h-5 !w-5" />
+    <Icon name="question" class="h-5! w-5!" />
   </a>
 </template>
 
diff --git a/web/src/components/atomic/Error.vue b/web/src/components/atomic/Error.vue
index d9aec5923..1a230b4ba 100644
--- a/web/src/components/atomic/Error.vue
+++ b/web/src/components/atomic/Error.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex items-center gap-2 rounded-md border border-l-4 border-solid border-wp-error-200 bg-wp-error-100 p-2 text-white"
+    class="border-wp-error-200 bg-wp-error-100 flex items-center gap-2 rounded-md border border-l-4 border-solid p-2 text-white"
   >
     <Icon v-if="!textOnly" name="alert" />
     <slot>
diff --git a/web/src/components/atomic/IconButton.vue b/web/src/components/atomic/IconButton.vue
index c12e8cb4b..023213d0f 100644
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@@ -21,7 +21,7 @@
     <slot>
       <Icon v-if="icon" :name="icon" />
     </slot>
-    <div v-if="isLoading" class="absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center">
+    <div v-if="isLoading" class="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center">
       <Icon name="loading" class="animate-spin" />
     </div>
   </button>
@@ -44,6 +44,8 @@ defineProps<{
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 .icon-button {
   @apply hover-effect relative flex items-center justify-center overflow-hidden rounded-md bg-transparent px-1 py-1 disabled:cursor-not-allowed disabled:opacity-50;
 }
diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index eb9a4a49b..3b4c2c52e 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -2,9 +2,9 @@
   <component
     :is="to ? 'router-link' : clickable ? 'button' : 'div'"
     :to="to"
-    class="flex w-full overflow-hidden rounded-md border border-wp-background-400 bg-wp-background-100 p-4 dark:bg-wp-background-200"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex w-full overflow-hidden rounded-md border p-4"
     :class="{
-      'cursor-pointer hover:bg-wp-background-300 hover:shadow-md dark:hover:bg-wp-background-300': clickable || to,
+      'hover:bg-wp-background-300 dark:hover:bg-wp-background-300 cursor-pointer hover:shadow-md': clickable || to,
     }"
   >
     <slot />
diff --git a/web/src/components/atomic/Warning.vue b/web/src/components/atomic/Warning.vue
index 128bb4a63..00637a6ed 100644
--- a/web/src/components/atomic/Warning.vue
+++ b/web/src/components/atomic/Warning.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    class="flex items-center gap-4 rounded-md border border-l-4 border-solid border-wp-hint-warn-200 bg-wp-hint-warn-100 p-4 font-bold text-gray-700"
+    class="border-wp-hint-warn-200 bg-wp-hint-warn-100 flex items-center gap-4 rounded-md border border-l-4 border-solid p-4 font-bold text-gray-700"
   >
-    <Icon v-if="!textOnly" name="alert" class="flex-shrink-0" />
+    <Icon v-if="!textOnly" name="alert" class="shrink-0" />
     <slot>
       <span class="whitespace-pre-wrap">{{ text }}</span>
     </slot>
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index a68b0bc73..32d05bee3 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 relative h-5 w-5 flex-shrink-0 cursor-pointer rounded-md border border-wp-control-neutral-200 bg-wp-control-neutral-100 transition-colors duration-150 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
+      class="checkbox border-wp-control-neutral-200 bg-wp-control-neutral-100 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-md border transition-colors duration-150"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />
     <div class="ml-4 flex flex-col">
-      <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>
+      <label class="text-wp-text-100 cursor-pointer" :for="`checkbox-${id}`">{{ label }}</label>
+      <span v-if="description" class="text-wp-text-alt-100 text-sm">{{ description }}</span>
     </div>
   </div>
 </template>
@@ -39,6 +39,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 .checkbox {
   width: 1.3rem;
   height: 1.3rem;
@@ -61,7 +63,6 @@ const id = (Math.random() + 1).toString(36).substring(7);
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -60%) rotate(45deg);
   opacity: 0;
-  @apply dark:border-white;
 }
 
 .checkbox:checked::before {
diff --git a/web/src/components/form/InputField.vue b/web/src/components/form/InputField.vue
index 57080d26b..8caa3d9b3 100644
--- a/web/src/components/form/InputField.vue
+++ b/web/src/components/form/InputField.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="mb-4 mt-2 flex flex-col">
+  <div class="mt-2 mb-4 flex flex-col">
     <div class="mb-2 flex items-center">
-      <label class="font-bold text-wp-text-100" :for="id" v-bind="$attrs">{{ label }}</label>
+      <label class="text-wp-text-100 font-bold" :for="id" v-bind="$attrs">{{ label }}</label>
       <DocsLink v-if="docsUrl" :topic="label" :url="docsUrl" class="ml-2" />
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
-    <div v-if="$slots.description" class="mb-2 text-sm text-wp-text-alt-100">
+    <div v-if="$slots.description" class="text-wp-text-alt-100 mb-2 text-sm">
       <slot name="description" />
     </div>
     <slot :id="id" />
diff --git a/web/src/components/form/KeyValueEditor.vue b/web/src/components/form/KeyValueEditor.vue
index 0b2565938..bfa7966b9 100644
--- a/web/src/components/form/KeyValueEditor.vue
+++ b/web/src/components/form/KeyValueEditor.vue
@@ -17,7 +17,7 @@
         :placeholder="valuePlaceholder"
         @update:model-value="updateItem(index, 'value', $event)"
       />
-      <div class="w-10 flex-shrink-0">
+      <div class="w-10 shrink-0">
         <Button
           v-if="index !== displayItems.length - 1"
           type="button"
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index e6c88750e..c76fc62a7 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 h-5 w-5 flex-shrink-0 cursor-pointer rounded-full border border-wp-control-neutral-200 bg-wp-control-neutral-100 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300"
+      class="radio border-wp-control-neutral-200 bg-wp-control-neutral-100 checked:border-wp-control-ok-200 checked:bg-wp-control-ok-200 focus-visible:border-wp-control-neutral-300 checked:focus-visible:border-wp-control-ok-300 relative h-5 w-5 shrink-0 cursor-pointer rounded-full border"
       :value="option.value"
       :checked="innerValue?.includes(option.value)"
       @click="innerValue = option.value"
     />
     <div class="ml-4 flex flex-col">
-      <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>
+      <label class="text-wp-text-100 cursor-pointer" :for="`radio-${id}-${option.value}`">{{ option.text }}</label>
+      <span v-if="option.description" class="text-wp-text-alt-100 text-sm">{{ option.description }}</span>
     </div>
   </div>
 </template>
@@ -41,6 +41,8 @@ const id = (Math.random() + 1).toString(36).substring(7);
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 .radio {
   width: 1.3rem;
   height: 1.3rem;
@@ -62,7 +64,6 @@ const id = (Math.random() + 1).toString(36).substring(7);
   background: white;
   transform: translate(-50%, -50%);
   opacity: 0;
-  @apply dark:bg-white;
 }
 
 .radio:checked::before {
diff --git a/web/src/components/form/SelectField.vue b/web/src/components/form/SelectField.vue
index 51f64f146..d3c8e3ed5 100644
--- a/web/src/components/form/SelectField.vue
+++ b/web/src/components/form/SelectField.vue
@@ -1,7 +1,7 @@
 <template>
   <select
     v-model="innerValue"
-    class="w-full rounded-md border border-wp-control-neutral-200 bg-wp-control-neutral-100 px-2 py-1 text-wp-text-100"
+    class="border-wp-control-neutral-200 bg-wp-control-neutral-100 text-wp-text-100 w-full rounded-md border px-2 py-1"
   >
     <option v-if="placeholder" value="" class="hidden">{{ placeholder }}</option>
     <option v-for="option in options" :key="option.value" :value="option.value" class="text-wp-text-100">
diff --git a/web/src/components/form/TextField.vue b/web/src/components/form/TextField.vue
index b074384d3..49f11da28 100644
--- a/web/src/components/form/TextField.vue
+++ b/web/src/components/form/TextField.vue
@@ -2,7 +2,7 @@
   <input
     v-if="lines === 1"
     v-model="innerValue"
-    class="w-full rounded-md border border-wp-control-neutral-200 bg-wp-background-100 px-2 py-1 focus-visible:border-wp-control-neutral-300 focus-visible:outline-none"
+    class="border-wp-control-neutral-200 bg-wp-background-100 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-hidden"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :type="type"
@@ -11,7 +11,7 @@
   <textarea
     v-else
     v-model="innerValue"
-    class="w-full rounded-md border border-wp-control-neutral-200 bg-wp-background-100 px-2 py-1 focus-visible:border-wp-control-neutral-300 focus-visible:outline-none"
+    class="border-wp-control-neutral-200 bg-wp-background-100 focus-visible:border-wp-control-neutral-300 w-full rounded-md border px-2 py-1 focus-visible:outline-hidden"
     :class="{ 'opacity-50': disabled }"
     :disabled="disabled"
     :placeholder="placeholder"
diff --git a/web/src/components/layout/Panel.vue b/web/src/components/layout/Panel.vue
index 21302d96d..77ac1cb23 100644
--- a/web/src/components/layout/Panel.vue
+++ b/web/src/components/layout/Panel.vue
@@ -1,12 +1,12 @@
 <template>
   <div
-    class="w-full overflow-hidden rounded-md border border-wp-background-400 bg-wp-background-100 shadow dark:bg-wp-background-200"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 w-full overflow-hidden rounded-md border shadow-sm"
   >
     <component
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="flex w-full gap-2 bg-wp-background-400 px-4 py-2 font-bold text-wp-text-100"
+      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       @click="_collapsed = !_collapsed"
     >
       <Icon
@@ -22,9 +22,9 @@
         'max-h-auto': !collapsed,
         'max-h-0': collapsed,
       }"
-      class="overflow-hidden transition-height duration-150"
+      class="transition-height overflow-hidden duration-150"
     >
-      <div class="w-full p-4 text-wp-text-100">
+      <div class="text-wp-text-100 w-full p-4">
         <slot />
       </div>
     </div>
diff --git a/web/src/components/layout/Popup.vue b/web/src/components/layout/Popup.vue
index 9546d0a5f..031024ed2 100644
--- a/web/src/components/layout/Popup.vue
+++ b/web/src/components/layout/Popup.vue
@@ -2,7 +2,7 @@
   <!-- overlay -->
   <div
     v-if="open"
-    class="fixed bottom-0 left-0 right-0 top-0 z-40 bg-gray-900 opacity-80 print:hidden"
+    class="fixed top-0 right-0 bottom-0 left-0 z-40 bg-gray-900 opacity-80 print:hidden"
     @click="$emit('close')"
   />
   <!-- overlay end -->
diff --git a/web/src/components/layout/Settings.vue b/web/src/components/layout/Settings.vue
index d20aff2bb..12666f90d 100644
--- a/web/src/components/layout/Settings.vue
+++ b/web/src/components/layout/Settings.vue
@@ -1,8 +1,8 @@
 <template>
   <Panel>
-    <div class="mb-4 flex flex-col justify-center border-b pb-4 dark:border-wp-background-100">
+    <div class="dark:border-wp-background-100 mb-4 flex flex-col justify-center border-b pb-4">
       <div class="flex items-center justify-between">
-        <h1 class="flex items-center gap-1 text-xl text-wp-text-100">
+        <h1 class="text-wp-text-100 flex items-center gap-1 text-xl">
           {{ title }}
           <DocsLink v-if="docsUrl" :topic="title" :url="docsUrl" />
         </h1>
@@ -10,7 +10,7 @@
       </div>
 
       <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
-        <p v-if="description" class="text-sm text-wp-text-alt-100">{{ description }}</p>
+        <p v-if="description" class="text-wp-text-alt-100 text-sm">{{ description }}</p>
         <div v-if="$slots.headerActions">
           <slot name="headerActions" />
         </div>
diff --git a/web/src/components/layout/header/ActivePipelines.vue b/web/src/components/layout/header/ActivePipelines.vue
index 874de10e1..3b8e38db8 100644
--- a/web/src/components/layout/header/ActivePipelines.vue
+++ b/web/src/components/layout/header/ActivePipelines.vue
@@ -1,13 +1,11 @@
 <template>
   <IconButton
     :title="pipelineCount > 0 ? `${$t('pipeline_feed')} (${pipelineCount})` : $t('pipeline_feed')"
-    class="active-pipelines-toggle relative !p-1.5 text-current"
+    class="active-pipelines-toggle relative p-1.5! text-current"
     @click="toggle"
   >
     <div v-if="pipelineCount > 0" class="spinner" />
-    <div
-      class="z-0 flex h-full w-full items-center justify-center rounded-md bg-white bg-opacity-15 font-bold dark:bg-black dark:bg-opacity-10"
-    >
+    <div class="z-0 flex h-full w-full items-center justify-center rounded-md bg-white/15 font-bold dark:bg-black/10">
       <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
       {{ pipelineCount > 9 ? '9+' : pipelineCount }}
     </div>
@@ -31,6 +29,8 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 @keyframes rotate {
   100% {
     transform: rotate(1turn);
@@ -41,7 +41,7 @@ onMounted(async () => {
   overflow: hidden;
 }
 .spinner::before {
-  @apply absolute bg-wp-primary-200 dark:bg-wp-primary-300;
+  @apply bg-wp-primary-200 absolute;
   content: '';
   left: -50%;
   top: -50%;
@@ -55,7 +55,7 @@ onMounted(async () => {
   animation: rotate 1.5s linear infinite;
 }
 .spinner::after {
-  @apply absolute inset-0.5 bg-wp-primary-200 dark:bg-wp-primary-300;
+  @apply bg-wp-primary-200 absolute inset-0.5;
   /*
   The nested border radius needs to be calculated correctly to look right:
   https://www.30secondsofcode.org/css/s/nested-border-radius/
@@ -63,4 +63,9 @@ onMounted(async () => {
   border-radius: calc(0.375rem - 0.125rem);
   content: '';
 }
+
+:root[data-theme='dark'] .spinner::before,
+:root[data-theme='dark'] .spinner::after {
+  @apply bg-wp-primary-300;
+}
 </style>
diff --git a/web/src/components/layout/header/Navbar.vue b/web/src/components/layout/header/Navbar.vue
index 5ce1c5a13..e9ce5cce8 100644
--- a/web/src/components/layout/header/Navbar.vue
+++ b/web/src/components/layout/header/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="text-neutral-content flex border-b border-wp-background-100 bg-wp-primary-200 p-4 font-bold text-wp-primary-text-100 dark:bg-wp-primary-300"
+    class="text-neutral-content border-wp-background-100 bg-wp-primary-200 text-wp-primary-text-100 dark:bg-wp-primary-300 flex border-b p-4 font-bold"
   >
     <div class="flex items-center space-x-2">
       <router-link :to="{ name: 'home' }" class="-my-2 flex flex-col px-2">
@@ -26,11 +26,11 @@
         :to="{ name: 'admin-settings' }"
       >
         <Icon name="settings" />
-        <div v-if="version?.needsUpdate" class="absolute right-2 top-2 h-3 w-3 rounded-full bg-wp-error-100" />
+        <div v-if="version?.needsUpdate" class="bg-wp-error-100 absolute top-2 right-2 h-3 w-3 rounded-full" />
       </IconButton>
 
-      <ActivePipelines v-if="user" class="navbar-icon !p-1.5" />
-      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon !p-1.5">
+      <ActivePipelines v-if="user" class="navbar-icon p-1.5!" />
+      <IconButton v-if="user" :to="{ name: 'user' }" :title="$t('user.settings.settings')" class="navbar-icon p-1.5!">
         <img v-if="user && user.avatar_url" class="rounded-md" :src="`${user.avatar_url}`" />
       </IconButton>
       <Button v-else :text="$t('login')" :to="`/login?url=${route.fullPath}`" />
@@ -62,6 +62,8 @@ const { enableSwagger } = config;
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 .navbar-icon {
   @apply h-11 w-11 rounded-md p-2.5;
 }
diff --git a/web/src/components/layout/popups/DeployPipelinePopup.vue b/web/src/components/layout/popups/DeployPipelinePopup.vue
index 0d4cd011d..61b545f79 100644
--- a/web/src/components/layout/popups/DeployPipelinePopup.vue
+++ b/web/src/components/layout/popups/DeployPipelinePopup.vue
@@ -2,7 +2,7 @@
   <Popup :open="open" @close="$emit('close')">
     <Panel v-if="!loading">
       <form @submit.prevent="triggerDeployPipeline">
-        <span class="text-xl text-wp-text-100">{{
+        <span class="text-wp-text-100 text-xl">{{
           $t('repo.deploy_pipeline.title', { pipelineId: pipelineNumber })
         }}</span>
         <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.enter_target')">
@@ -12,7 +12,7 @@
           <TextField :id="id" v-model="payload.task" />
         </InputField>
         <InputField v-slot="{ id }" :label="$t('repo.deploy_pipeline.variables.title')">
-          <span class="mb-2 text-sm text-wp-text-alt-100">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
+          <span class="text-wp-text-alt-100 mb-2 text-sm">{{ $t('repo.deploy_pipeline.variables.desc') }}</span>
           <KeyValueEditor
             :id="id"
             v-model="payload.variables"
diff --git a/web/src/components/layout/scaffold/Header.vue b/web/src/components/layout/scaffold/Header.vue
index b5d884665..770754b6f 100644
--- a/web/src/components/layout/scaffold/Header.vue
+++ b/web/src/components/layout/scaffold/Header.vue
@@ -1,9 +1,9 @@
 <template>
   <header
-    class="border-b border-wp-background-400 bg-wp-background-100 text-wp-text-100 dark:border-wp-background-100 dark:bg-wp-background-300"
+    class="border-wp-background-400 bg-wp-background-100 text-wp-text-100 dark:border-wp-background-100 dark:bg-wp-background-300 border-b"
     :class="{ 'md:px-4': fullWidth }"
   >
-    <Container :full-width="fullWidth" class="!py-0">
+    <Container :full-width="fullWidth" class="py-0!">
       <div class="flex w-full flex-col gap-2 py-3 md:flex-row md:items-center md:justify-between md:gap-10">
         <div
           class="flex min-h-10 content-start items-center"
@@ -15,16 +15,16 @@
             v-if="goBack"
             icon="back"
             :title="$t('back')"
-            class="md:display-unset mr-2 hidden h-8 w-8 flex-shrink-0 md:justify-between"
+            class="md:display-unset mr-2 hidden h-8 w-8 shrink-0 md:justify-between"
             @click="goBack"
           />
-          <h1 class="flex min-w-0 items-center gap-x-2 text-xl text-wp-text-100">
+          <h1 class="text-wp-text-100 flex min-w-0 items-center gap-x-2 text-xl">
             <slot name="title" />
           </h1>
         </div>
         <TextField
           v-if="searchBoxPresent"
-          class="order-3 w-full flex-grow md:order-none md:w-auto"
+          class="order-3 w-full grow md:order-none md:w-auto"
           :aria-label="$t('search')"
           :placeholder="$t('search')"
           :model-value="search"
diff --git a/web/src/components/layout/scaffold/Tabs.vue b/web/src/components/layout/scaffold/Tabs.vue
index 08f6502db..d269e4081 100644
--- a/web/src/components/layout/scaffold/Tabs.vue
+++ b/web/src/components/layout/scaffold/Tabs.vue
@@ -5,14 +5,14 @@
       v-for="tab in visibleTabs"
       :key="tab.title"
       :to="tab.to"
-      class="flex cursor-pointer items-center whitespace-nowrap border-b-2 border-transparent py-1 text-wp-text-100"
-      :active-class="tab.matchChildren ? '!border-wp-text-100' : ''"
-      :exact-active-class="tab.matchChildren ? '' : '!border-wp-text-100'"
+      class="text-wp-text-100 flex cursor-pointer items-center border-b-2 border-transparent py-1 whitespace-nowrap"
+      :active-class="tab.matchChildren ? 'border-wp-text-100!' : ''"
+      :exact-active-class="tab.matchChildren ? '' : 'border-wp-text-100!'"
     >
       <span
-        class="flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1 hover:bg-wp-background-200 dark:hover:bg-wp-background-100"
+        class="hover:bg-wp-background-200 dark:hover:bg-wp-background-100 flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1"
       >
-        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
+        <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="shrink-0" />
         <span>{{ tab.title }}</span>
         <CountBadge v-if="tab.count" :value="tab.count" />
       </span>
@@ -24,20 +24,20 @@
 
       <div
         v-if="isDropdownOpen"
-        class="tabs-dropdown absolute z-20 mt-1 rounded-md border border-wp-background-400 bg-wp-background-100 shadow-lg dark:bg-wp-background-200"
+        class="tabs-dropdown border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 absolute z-20 mt-1 rounded-md border shadow-lg"
         :class="[visibleTabs.length === 0 ? 'left-0' : 'right-0']"
       >
         <router-link
           v-for="tab in hiddenTabs"
           :key="tab.title"
           :to="tab.to"
-          class="block w-full whitespace-nowrap p-1 text-left"
+          class="block w-full p-1 text-left whitespace-nowrap"
           @click="isDropdownOpen = false"
         >
           <span
-            class="flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1 hover:bg-wp-background-200 dark:hover:bg-wp-background-100"
+            class="hover:bg-wp-background-200 dark:hover:bg-wp-background-100 flex w-full min-w-20 flex-row items-center justify-center gap-2 rounded-md px-2 py-1"
           >
-            <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="flex-shrink-0" />
+            <Icon v-if="tab.icon" :name="tab.icon" :class="tab.iconClass" class="shrink-0" />
             <span>{{ tab.title }}</span>
           </span>
         </router-link>
diff --git a/web/src/components/pipeline-feed/PipelineFeedItem.vue b/web/src/components/pipeline-feed/PipelineFeedItem.vue
index 47ae1052d..6d3d79f8d 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 w-full text-wp-text-100">
+  <div v-if="pipeline" class="text-wp-text-100 flex w-full">
     <PipelineStatusIcon :status="pipeline.status" class="flex items-center" />
     <div class="ml-4 flex min-w-0 flex-col">
       <router-link
@@ -12,7 +12,7 @@
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
         {{ repo?.owner }} / {{ repo?.name }}
       </router-link>
-      <span class="overflow-hidden overflow-ellipsis whitespace-nowrap" :title="message">{{ shortMessage }}</span>
+      <span class="overflow-hidden text-ellipsis whitespace-nowrap" :title="message">{{ shortMessage }}</span>
       <div class="mt-2 flex flex-col">
         <div class="flex items-center space-x-2" :title="created">
           <Icon name="since" />
diff --git a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
index f44ac3f9e..315934462 100644
--- a/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
+++ b/web/src/components/pipeline-feed/PipelineFeedSidebar.vue
@@ -2,7 +2,7 @@
   <aside
     v-if="isOpen"
     ref="target"
-    class="z-50 flex flex-col items-center overflow-y-auto border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200"
+    class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 z-50 flex flex-col items-center overflow-y-auto"
     :aria-label="$t('pipeline_feed')"
   >
     <router-link
@@ -12,12 +12,12 @@
         name: 'repo-pipeline',
         params: { repoId: pipeline.repo_id, pipelineId: pipeline.number },
       }"
-      class="flex w-full border-b border-wp-background-400 px-2 py-4 hover:bg-wp-background-300 hover:shadow-sm dark:hover:bg-wp-background-400"
+      class="border-wp-background-400 hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full border-b px-2 py-4 hover:shadow-xs"
     >
       <PipelineFeedItem :pipeline="pipeline" />
     </router-link>
 
-    <span v-if="sortedPipelines.length === 0" class="m-4 text-wp-text-100">{{ $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/registry/RegistryList.vue b/web/src/components/registry/RegistryList.vue
index fd54640b6..75a19edaf 100644
--- a/web/src/components/registry/RegistryList.vue
+++ b/web/src/components/registry/RegistryList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="space-y-4 text-wp-text-100">
+  <div class="text-wp-text-100 space-y-4">
     <ListItem
       v-for="registry in registries"
       :key="registry.id"
-      class="items-center !bg-wp-background-200 dark:!bg-wp-background-100"
+      class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
     >
       <span>{{ registry.address }}</span>
       <IconButton
@@ -15,7 +15,7 @@
       <IconButton
         v-if="!registry.readonly"
         icon="trash"
-        class="h-8 w-8 hover:text-wp-error-100"
+        class="hover:text-wp-error-100 h-8 w-8"
         :is-loading="isDeleting"
         :title="$t('registries.delete')"
         @click="deleteRegistry(registry)"
diff --git a/web/src/components/repo/RepoItem.vue b/web/src/components/repo/RepoItem.vue
index 7444cb34f..d0b274b11 100644
--- a/web/src/components/repo/RepoItem.vue
+++ b/web/src/components/repo/RepoItem.vue
@@ -2,11 +2,11 @@
   <router-link
     v-if="repo"
     :to="{ name: 'repo', params: { repoId: repo.id } }"
-    class="flex cursor-pointer flex-col overflow-hidden rounded-md border border-wp-background-400 bg-wp-background-100 p-4 hover:bg-wp-background-300 hover:shadow-md dark:bg-wp-background-200 dark:hover:bg-wp-background-300"
+    class="border-wp-background-400 bg-wp-background-100 hover:bg-wp-background-300 dark:bg-wp-background-200 dark:hover:bg-wp-background-300 flex cursor-pointer flex-col overflow-hidden rounded-md border p-4 hover:shadow-md"
   >
-    <div class="grid grid-cols-[auto,1fr] items-center gap-y-4">
-      <div class="text-lg text-wp-text-100">{{ `${repo.owner} / ${repo.name}` }}</div>
-      <div class="ml-auto text-wp-text-100">
+    <div class="grid grid-cols-[auto_1fr] items-center gap-y-4">
+      <div class="text-wp-text-100 text-lg">{{ `${repo.owner} / ${repo.name}` }}</div>
+      <div class="text-wp-text-100 ml-auto">
         <div
           v-if="repo.visibility === RepoVisibility.Private"
           :title="`${$t('repo.visibility.visibility')}: ${$t(`repo.visibility.private.private`)}`"
@@ -21,14 +21,14 @@
         </div>
       </div>
 
-      <div class="col-span-2 flex w-full gap-x-4 text-wp-text-100">
+      <div class="text-wp-text-100 col-span-2 flex w-full gap-x-4">
         <template v-if="lastPipeline">
           <div class="flex min-w-0 flex-1 items-center gap-x-1">
             <PipelineStatusIcon v-if="lastPipeline" :status="lastPipeline.status" />
-            <span class="overflow-hidden overflow-ellipsis whitespace-nowrap pl-1">{{ shortMessage }}</span>
+            <span class="overflow-hidden pl-1 text-ellipsis whitespace-nowrap">{{ shortMessage }}</span>
           </div>
 
-          <div class="ml-auto flex flex-shrink-0 items-center gap-x-1">
+          <div class="ml-auto flex shrink-0 items-center gap-x-1">
             <Icon name="since" />
             <span>{{ since }}</span>
           </div>
diff --git a/web/src/components/repo/pipeline/PipelineItem.vue b/web/src/components/repo/pipeline/PipelineItem.vue
index c17b6d0e5..a74b3cf64 100644
--- a/web/src/components/repo/pipeline/PipelineItem.vue
+++ b/web/src/components/repo/pipeline/PipelineItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <ListItem v-if="pipeline" class="w-full !p-0">
+  <ListItem v-if="pipeline" class="w-full p-0!">
     <div class="flex w-11 items-center">
       <div
         class="h-full w-3"
@@ -17,19 +17,19 @@
       </div>
     </div>
 
-    <div class="flex min-w-0 flex-grow flex-wrap px-4 py-2 md:flex-nowrap">
-      <div class="hidden flex-shrink-0 items-center md:flex">
+    <div class="flex min-w-0 grow flex-wrap px-4 py-2 md:flex-nowrap">
+      <div class="hidden shrink-0 items-center md:flex">
         <Icon v-if="pipeline.event === 'cron'" name="stopwatch" class="text-wp-text-100" />
         <img v-else class="w-6 rounded-md" :src="pipeline.author_avatar" />
       </div>
 
       <div class="flex w-full min-w-0 items-center md:mx-4 md:w-auto">
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <span class="md:display-unset hidden text-wp-text-alt-100">#{{ pipeline.number }}</span>
+        <span class="md:display-unset text-wp-text-alt-100 hidden">#{{ pipeline.number }}</span>
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <span class="md:display-unset mx-2 hidden text-wp-text-alt-100">-</span>
+        <span class="md:display-unset text-wp-text-alt-100 mx-2 hidden">-</span>
         <span
-          class="overflow-hidden overflow-ellipsis whitespace-nowrap text-wp-text-100 underline md:no-underline"
+          class="text-wp-text-100 overflow-hidden text-ellipsis whitespace-nowrap underline md:no-underline"
           :title="message"
         >
           {{ shortMessage }}
@@ -37,7 +37,7 @@
       </div>
 
       <div
-        class="grid w-full flex-shrink-0 grid-flow-col grid-cols-2 grid-rows-2 gap-x-4 gap-y-2 py-2 text-wp-text-100 md:ml-auto md:w-96"
+        class="text-wp-text-100 grid w-full shrink-0 grid-flow-col grid-cols-2 grid-rows-2 gap-x-4 gap-y-2 py-2 md:ml-auto md:w-96"
       >
         <div class="flex min-w-0 items-center space-x-2">
           <span :title="pipelineEventTitle">
diff --git a/web/src/components/repo/pipeline/PipelineLog.vue b/web/src/components/repo/pipeline/PipelineLog.vue
index e830a65e1..052d311d3 100644
--- a/web/src/components/repo/pipeline/PipelineLog.vue
+++ b/web/src/components/repo/pipeline/PipelineLog.vue
@@ -1,14 +1,14 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="code-box-log flex flex-grow flex-col overflow-hidden !p-0 shadow md:mt-0 md:!rounded-md"
+      class="code-box-log flex grow flex-col overflow-hidden p-0! shadow-sm md:mt-0 md:rounded-md!"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >
       <div
-        class="fixed left-0 top-0 flex w-full flex-row items-center bg-wp-code-100 px-4 py-2 md:relative md:left-auto md:top-auto"
+        class="bg-wp-code-100 fixed top-0 left-0 flex w-full flex-row items-center px-4 py-2 md:relative md:top-auto md:left-auto"
       >
-        <span class="text-base font-bold text-wp-code-text-alt-100">
+        <span class="text-wp-code-text-alt-100 text-base font-bold">
           <span class="md:display-unset hidden">{{ $t('repo.pipeline.log_title') }}</span>
           <span class="md:hidden">{{ step?.name }}</span>
         </span>
@@ -18,14 +18,14 @@
             v-if="step?.finished !== undefined && hasLogs"
             :is-loading="downloadInProgress"
             :title="$t('repo.pipeline.actions.log_download')"
-            class="hover:!bg-white hover:!bg-opacity-10"
+            class="hover:bg-white/10!"
             icon="download"
             @click="download"
           />
           <IconButton
             v-if="step?.finished !== undefined && hasLogs && hasPushPermission"
             :title="$t('repo.pipeline.actions.log_delete')"
-            class="hover:!bg-white hover:!bg-opacity-10"
+            class="hover:bg-white/10!"
             icon="trash"
             @click="deleteLogs"
           />
@@ -34,32 +34,28 @@
             :title="
               autoScroll ? $t('repo.pipeline.actions.log_auto_scroll_off') : $t('repo.pipeline.actions.log_auto_scroll')
             "
-            class="hover:!bg-white hover:!bg-opacity-10"
+            class="hover:bg-white/10!"
             :icon="autoScroll ? 'auto-scroll' : 'auto-scroll-off'"
             @click="autoScroll = !autoScroll"
           />
-          <IconButton
-            class="hover:!bg-white hover:!bg-opacity-10 md:!hidden"
-            icon="close"
-            @click="$emit('update:step-id', null)"
-          />
+          <IconButton class="hover:bg-white/10! md:hidden!" icon="close" @click="$emit('update:step-id', null)" />
         </div>
       </div>
 
       <div
         v-show="hasLogs && loadedLogs && (log?.length || 0) > 0"
         ref="consoleElement"
-        class="grid w-full max-w-full flex-grow auto-rows-min grid-cols-[min-content,minmax(0,1fr),min-content] overflow-y-auto overflow-x-hidden p-4 text-xs md:text-sm"
+        class="grid w-full max-w-full grow auto-rows-min grid-cols-[min-content_minmax(0,1fr)_min-content] overflow-x-hidden overflow-y-auto p-4 text-xs md:text-sm"
       >
         <div v-for="line in log" :key="line.index" class="contents font-mono">
           <a
             :id="`L${line.number}`"
             :href="`#L${line.number}`"
-            class="select-none whitespace-nowrap pl-2 pr-6 text-right text-wp-code-text-alt-100"
+            class="text-wp-code-text-alt-100 pr-6 pl-2 text-right whitespace-nowrap select-none"
             :class="{
-              'bg-red-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
-              'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
-              'bg-blue-600 bg-opacity-30': isSelected(line),
+              'bg-red-600/40 dark:bg-red-800/50': line.type === 'error',
+              'bg-yellow-600/40 dark:bg-yellow-800/50': line.type === 'warning',
+              'bg-blue-600/30': isSelected(line),
               underline: isSelected(line),
             }"
           >
@@ -67,21 +63,21 @@
           </a>
           <!-- eslint-disable vue/no-v-html -->
           <span
-            class="whitespace-pre-wrap break-words align-top"
+            class="align-top break-words whitespace-pre-wrap"
             :class="{
-              'bg-10.168.64.121-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
-              'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
-              'bg-blue-600 bg-opacity-30': isSelected(line),
+              'bg-red-600/40 dark:bg-red-800/50': line.type === 'error',
+              'bg-yellow-600/40 dark:bg-yellow-800/50': line.type === 'warning',
+              'bg-blue-600/30': isSelected(line),
             }"
             v-html="line.text"
           />
           <!-- eslint-enable vue/no-v-html -->
           <span
-            class="select-none whitespace-nowrap pr-1 text-right text-wp-code-text-alt-100"
+            class="text-wp-code-text-alt-100 pr-1 text-right whitespace-nowrap select-none"
             :class="{
-              'bg-red-600 bg-opacity-40 dark:bg-red-800 dark:bg-opacity-50': line.type === 'error',
-              'bg-yellow-600 bg-opacity-40 dark:bg-yellow-800 dark:bg-opacity-50': line.type === 'warning',
-              'bg-blue-600 bg-opacity-30': isSelected(line),
+              'bg-red-600/40 dark:bg-red-800/50': line.type === 'error',
+              'bg-yellow-600/40 dark:bg-yellow-800/50': line.type === 'warning',
+              'bg-blue-600/30': isSelected(line),
             }"
           >
             {{ formatTime(line.time) }}
@@ -89,7 +85,7 @@
         </div>
       </div>
 
-      <div class="m-auto text-xl text-wp-text-alt-100">
+      <div class="text-wp-text-alt-100 m-auto text-xl">
         <span v-if="step?.state === 'skipped'">{{ $t('repo.pipeline.actions.canceled') }}</span>
         <span v-else-if="!step?.started">{{ $t('repo.pipeline.step_not_started') }}</span>
         <div v-else-if="!loadedLogs">{{ $t('repo.pipeline.loading') }}</div>
@@ -98,9 +94,9 @@
 
       <div
         v-if="step?.finished !== undefined"
-        class="text-md flex w-full items-center bg-wp-code-100 p-4 font-bold text-wp-code-text-alt-100"
+        class="text-md bg-wp-code-100 text-wp-code-text-alt-100 flex w-full items-center p-4 font-bold"
       >
-        <PipelineStatusIcon :status="step.state" class="!h-4 !w-4" />
+        <PipelineStatusIcon :status="step.state" class="h-4! w-4!" />
         <span v-if="step?.error" class="px-2">{{ step.error }}</span>
         <span v-else class="px-2">{{ $t('repo.pipeline.exit_code', { exitCode: step.exit_code }) }}</span>
       </div>
diff --git a/web/src/components/repo/pipeline/PipelineRunningIcon.vue b/web/src/components/repo/pipeline/PipelineRunningIcon.vue
index 1f0d176f5..56222915c 100644
--- a/web/src/components/repo/pipeline/PipelineRunningIcon.vue
+++ b/web/src/components/repo/pipeline/PipelineRunningIcon.vue
@@ -7,6 +7,8 @@ import WoodpeckerIcon from '~/assets/woodpecker.svg?component';
 </script>
 
 <style scoped>
+@reference '~/tailwind.css';
+
 @keyframes peck {
   0% {
     transform: rotate(5deg) translateX(5%);
diff --git a/web/src/components/repo/pipeline/PipelineStepList.vue b/web/src/components/repo/pipeline/PipelineStepList.vue
index ac5769784..75e9f79af 100644
--- a/web/src/components/repo/pipeline/PipelineStepList.vue
+++ b/web/src/components/repo/pipeline/PipelineStepList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="md:min-w-xs flex w-full flex-col gap-2 pb-2 text-wp-text-100 md:w-3/12 md:max-w-md">
+  <div class="text-wp-text-100 flex w-full flex-col gap-2 pb-2 md:w-3/12 md:max-w-md md:min-w-xs">
     <div
-      class="flex flex-shrink-0 flex-wrap justify-between gap-1 rounded-md border border-wp-background-400 bg-wp-background-100 p-4 dark:bg-wp-background-200"
+      class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex shrink-0 flex-wrap justify-between gap-1 rounded-md border p-4"
     >
-      <div class="flex flex-shrink-0 items-center space-x-1">
+      <div class="flex shrink-0 items-center space-x-1">
         <div class="flex items-center">
           <Icon v-if="pipeline.event === 'cron'" name="stopwatch" />
           <img v-else class="w-6 rounded-md" :src="pipeline.author_avatar" />
@@ -12,7 +12,7 @@
       </div>
       <a
         v-if="pipeline.event === 'pull_request' || pipeline.event === 'pull_request_closed'"
-        class="flex min-w-0 items-center space-x-1 text-wp-link-100 hover:text-wp-link-200"
+        class="text-wp-link-100 hover:text-wp-link-200 flex min-w-0 items-center space-x-1"
         :href="pipeline.forge_url"
       >
         <Icon name="pull-request" />
@@ -20,7 +20,7 @@
       </a>
       <router-link
         v-else-if="pipeline.event === 'push' || pipeline.event === 'manual' || pipeline.event === 'deployment'"
-        class="flex min-w-0 items-center space-x-1 text-wp-link-100 hover:text-wp-link-200"
+        class="text-wp-link-100 hover:text-wp-link-200 flex min-w-0 items-center space-x-1"
         :to="{ name: 'repo-branch', params: { branch: prettyRef } }"
       >
         <Icon v-if="pipeline.event === 'manual'" name="manual-pipeline" />
@@ -33,14 +33,14 @@
 
         <span class="truncate">{{ prettyRef }}</span>
       </div>
-      <div class="flex flex-shrink-0 items-center">
+      <div class="flex shrink-0 items-center">
         <template v-if="pipeline.event === 'pull_request'">
           <Icon name="commit" />
           <span>{{ pipeline.commit.slice(0, 10) }}</span>
         </template>
         <a
           v-else
-          class="flex items-center text-wp-link-100 hover:text-wp-link-200"
+          class="text-wp-link-100 hover:text-wp-link-200 flex items-center"
           :href="pipeline.forge_url"
           target="_blank"
         >
@@ -54,15 +54,15 @@
       <span>{{ $t('repo.pipeline.no_pipeline_steps') }}</span>
     </Panel>
 
-    <div class="relative min-h-0 w-full flex-grow">
-      <div class="absolute left-0 right-0 top-0 flex h-full flex-col gap-y-2 md:overflow-y-auto">
+    <div class="relative min-h-0 w-full grow">
+      <div class="absolute top-0 right-0 left-0 flex h-full flex-col gap-y-2 md:overflow-y-auto">
         <div
           v-for="workflow in pipeline.workflows"
           :key="workflow.id"
-          class="rounded-md border border-wp-background-400 bg-wp-background-100 p-2 shadow dark:bg-wp-background-200"
+          class="border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 rounded-md border p-2 shadow-sm"
         >
           <div class="flex flex-col gap-2">
-            <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pr-1 pt-1 text-xs">
+            <div v-if="workflow.environ" class="flex flex-wrap justify-end gap-x-1 gap-y-2 pt-1 pr-1 text-xs">
               <div v-for="(value, key) in workflow.environ" :key="key">
                 <Badge :label="key" :value="value" />
               </div>
@@ -71,7 +71,7 @@
               v-if="!singleConfig"
               type="button"
               :title="workflow.name"
-              class="hover-effect flex items-center gap-2 rounded-md px-1 py-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400"
+              class="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex items-center gap-2 rounded-md px-1 py-2"
               @click="workflowsCollapsed[workflow.id] = !workflowsCollapsed[workflow.id]"
             >
               <Icon
@@ -79,7 +79,7 @@
                 class="h-6 min-w-6 transition-transform duration-150"
                 :class="{ 'rotate-90 transform': !workflowsCollapsed[workflow.id] }"
               />
-              <PipelineStatusIcon :status="workflow.state" class="!h-4 !w-4" />
+              <PipelineStatusIcon :status="workflow.state" class="h-4! w-4!" />
               <span class="truncate">{{ workflow.name }}</span>
               <PipelineStepDuration
                 v-if="workflow.started !== workflow.finished"
@@ -89,7 +89,7 @@
             </button>
           </div>
           <div
-            class="overflow-hidden transition-height duration-150"
+            class="transition-height overflow-hidden duration-150"
             :class="{ 'max-h-0': workflowsCollapsed[workflow.id], 'ml-[1.6rem]': !singleConfig }"
           >
             <button
@@ -97,14 +97,14 @@
               :key="step.pid"
               type="button"
               :title="step.name"
-              class="hover-effect flex w-full items-center gap-2 rounded-md border-2 border-transparent p-2 hover:bg-wp-background-300 dark:hover:bg-wp-background-400"
+              class="hover-effect hover:bg-wp-background-300 dark:hover:bg-wp-background-400 flex w-full items-center gap-2 rounded-md border-2 border-transparent p-2"
               :class="{
                 'bg-wp-background-300 dark:bg-wp-background-400': selectedStepId && selectedStepId === step.pid,
                 'mt-1': !singleConfig || (workflow.children && step.pid !== workflow.children[0].pid),
               }"
               @click="$emit('update:selected-step-id', step.pid)"
             >
-              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="!h-4 !w-4" />
+              <PipelineStatusIcon :service="step.type === StepType.Service" :status="step.state" class="h-4! w-4!" />
               <span class="truncate">{{ step.name }}</span>
               <PipelineStepDuration :step="step" />
             </button>
diff --git a/web/src/components/secrets/SecretEdit.vue b/web/src/components/secrets/SecretEdit.vue
index 71e07adb7..ee6c518bd 100644
--- a/web/src/components/secrets/SecretEdit.vue
+++ b/web/src/components/secrets/SecretEdit.vue
@@ -22,7 +22,7 @@
       </InputField>
 
       <InputField v-slot="{ id }" :label="$t('secrets.plugins.images')">
-        <span class="mb-2 ml-1 text-wp-text-alt-100">{{ $t('secrets.plugins.desc') }}</span>
+        <span class="text-wp-text-alt-100 mb-2 ml-1">{{ $t('secrets.plugins.desc') }}</span>
 
         <div class="flex flex-col gap-2">
           <div v-for="image in innerValue.images" :key="image" class="flex gap-2">
diff --git a/web/src/components/secrets/SecretList.vue b/web/src/components/secrets/SecretList.vue
index 306b023e6..67320afc1 100644
--- a/web/src/components/secrets/SecretList.vue
+++ b/web/src/components/secrets/SecretList.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="space-y-4 text-wp-text-100">
+  <div class="text-wp-text-100 space-y-4">
     <ListItem
       v-for="secret in secrets"
       :key="secret.id"
-      class="items-center !bg-wp-background-200 dark:!bg-wp-background-100"
+      class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
     >
       <span>{{ secret.name }}</span>
       <Badge
@@ -23,7 +23,7 @@
         />
         <IconButton
           icon="trash"
-          class="ml-2 h-8 w-8 hover:text-wp-error-100"
+          class="hover:text-wp-error-100 ml-2 h-8 w-8"
           :is-loading="isDeleting"
           :title="$t('secrets.delete')"
           @click="deleteSecret(secret)"
diff --git a/web/src/style.css b/web/src/style.css
index 14b73b044..fc240bd2c 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,112 +1,114 @@
+@reference "./tailwind.css";
+
 :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-background-100: var(--color-white);
+  --wp-background-200: var(--color-gray-100);
+  --wp-background-300: var(--color-gray-200);
+  --wp-background-400: var(--color-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-text-100: var(--color-gray-600);
+  --wp-text-200: var(--color-gray-700);
+  --wp-text-alt-100: var(--color-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-primary-100: var(--color-int-wp-primary-300);
+  --wp-primary-200: var(--color-int-wp-primary-400);
+  --wp-primary-300: var(--color-int-wp-primary-500);
+  --wp-primary-text-100: var(--color-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-neutral-100: var(--color-white);
+  --wp-control-neutral-200: var(--color-gray-300);
+  --wp-control-neutral-300: var(--color-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-info-100: var(--color-int-wp-control-info-100);
+  --wp-control-info-200: var(--color-int-wp-control-info-200);
+  --wp-control-info-300: var(--color-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-ok-100: var(--color-int-wp-control-ok-100);
+  --wp-control-ok-200: var(--color-int-wp-control-ok-200);
+  --wp-control-ok-300: var(--color-int-wp-control-ok-300);
 
-  --wp-error-100: theme('colors.int-wp-error.100');
-  --wp-error-200: theme('colors.int-wp-error.200');
-  --wp-error-300: theme('colors.int-wp-error.300');
+  --wp-error-100: var(--color-int-wp-error-100);
+  --wp-error-200: var(--color-int-wp-error-200);
+  --wp-error-300: var(--color-int-wp-error-300);
 
-  --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-state-neutral-100: var(--color-int-wp-state-neutral-100);
+  --wp-state-ok-100: var(--color-int-wp-state-ok-100);
+  --wp-state-info-100: var(--color-int-wp-state-info-100);
+  --wp-state-warn-100: var(--color-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-hint-warn-100: var(--color-int-wp-hint-warn-100);
+  --wp-hint-warn-200: var(--color-int-wp-hint-warn-200);
 
-  --wp-code-inline-100: theme('colors.gray.200');
-  --wp-code-inline-200: theme('colors.gray.200');
+  --wp-code-inline-100: var(--color-gray-200);
+  --wp-code-inline-200: var(--color-gray-200);
 
-  --wp-code-inline-text-100: theme('colors.gray.600');
+  --wp-code-inline-text-100: var(--color-gray-600);
 
-  --wp-code-100: theme('colors.int-wp-secondary.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
-  --wp-code-300: theme('colors.int-wp-secondary.600');
+  --wp-code-100: var(--color-int-wp-secondary-300);
+  --wp-code-200: var(--color-int-wp-secondary-600);
+  --wp-code-300: var(--color-int-wp-secondary-600);
 
-  --wp-code-text-100: theme('colors.gray.200');
-  --wp-code-text-alt-100: theme('colors.gray.300');
+  --wp-code-text-100: var(--color-gray-200);
+  --wp-code-text-alt-100: var(--color-gray-300);
 
-  --wp-link-100: theme('colors.blue.600');
-  --wp-link-200: theme('colors.blue.700');
+  --wp-link-100: var(--color-blue-600);
+  --wp-link-200: var(--color-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-background-100: var(--color-int-wp-secondary-300);
+  --wp-background-200: var(--color-int-wp-secondary-400);
+  --wp-background-300: var(--color-int-wp-secondary-500);
+  --wp-background-400: var(--color-int-wp-secondary-600);
 
-  --wp-text-100: theme('colors.gray.300');
-  --wp-text-200: theme('colors.gray.200');
-  --wp-text-alt-100: theme('colors.gray.400');
+  --wp-text-100: var(--color-gray-300);
+  --wp-text-200: var(--color-gray-200);
+  --wp-text-alt-100: var(--color-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-primary-100: var(--color-int-wp-secondary-300);
+  --wp-primary-200: var(--color-int-wp-secondary-400);
+  --wp-primary-300: var(--color-int-wp-secondary-600);
+  --wp-primary-text-100: var(--color-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-neutral-100: var(--color-int-wp-secondary-300);
+  --wp-control-neutral-200: var(--color-int-wp-secondary-600);
+  --wp-control-neutral-300: var(--color-int-wp-secondary-700);
 
-  --wp-control-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-info-100: var(--color-int-wp-control-info-dark-100);
+  --wp-control-info-200: var(--color-int-wp-control-info-dark-200);
+  --wp-control-info-300: var(--color-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-ok-100: var(--color-int-wp-control-ok-dark-100);
+  --wp-control-ok-200: var(--color-int-wp-control-ok-dark-200);
+  --wp-control-ok-300: var(--color-int-wp-control-ok-dark-300);
 
-  --wp-error-100: theme('colors.int-wp-error.200');
-  --wp-error-200: theme('colors.int-wp-error.300');
-  --wp-error-300: theme('colors.int-wp-error.300');
+  --wp-error-100: var(--color-int-wp-error-200);
+  --wp-error-200: var(--color-int-wp-error-300);
+  --wp-error-300: var(--color-int-wp-error-300);
 
-  --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-state-neutral-100: var(--color-int-wp-state-neutral-100);
+  --wp-state-ok-100: var(--color-int-wp-state-ok-dark-100);
+  --wp-state-info-100: var(--color-int-wp-state-info-dark-100);
+  --wp-state-warn-100: var(--color-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-hint-warn-100: var(--color-int-wp-hint-warn-dark-100);
+  --wp-hint-warn-200: var(--color-int-wp-hint-warn-dark-200);
 
-  --wp-code-inline-100: theme('colors.int-wp-secondary.700');
-  --wp-code-inline-200: theme('colors.int-wp-secondary.300');
+  --wp-code-inline-100: var(--color-int-wp-secondary-700);
+  --wp-code-inline-200: var(--color-int-wp-secondary-300);
 
-  --wp-code-inline-text-100: theme('colors.gray.300');
+  --wp-code-inline-text-100: var(--color-gray-300);
 
-  --wp-code-100: theme('colors.int-wp-secondary.700'); /* #222631 */
-  --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
-  --wp-code-300: theme('colors.int-wp-secondary.800'); /* #1B1F28 */
+  --wp-code-100: var(--color-int-wp-secondary-700); /* #222631 */
+  --wp-code-200: var(--color-int-wp-secondary-600); /* #2a2e3a */
+  --wp-code-300: var(--color-int-wp-secondary-800); /* #1B1F28 */
 
-  --wp-code-text-100: theme('colors.gray.200');
-  --wp-code-text-alt-100: theme('colors.gray.400');
+  --wp-code-text-100: var(--color-gray-200);
+  --wp-code-text-alt-100: var(--color-gray-400);
 
-  --wp-link-100: theme('colors.blue.400');
-  --wp-link-200: theme('colors.blue.500');
+  --wp-link-100: var(--color-blue-400);
+  --wp-link-200: var(--color-blue-500);
 }
 
 html,
@@ -125,11 +127,11 @@ body,
 }
 
 .vue-notification.success {
-  @apply !border-l-wp-control-ok-300 !bg-wp-control-ok-100;
+  @apply !border-wp-error-200 !bg-wp-control-ok-100 !border-l;
 }
 
 .vue-notification.error {
-  @apply !border-l-wp-error-200 !bg-wp-error-100;
+  @apply !border-wp-error-200 !bg-wp-error-100 !border-l;
 }
 
 *::-webkit-scrollbar {
@@ -143,11 +145,11 @@ body,
 *::-webkit-scrollbar-thumb {
   transition: background 0.2s ease-in-out;
   border: 3px solid transparent;
-  @apply rounded-full bg-gray-200 bg-clip-content dark:bg-wp-background-200;
+  @apply dark:bg-wp-background-200 rounded-full bg-gray-200 bg-clip-content;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-300 dark:bg-wp-background-100;
+  @apply dark:bg-wp-background-100 bg-gray-300;
 }
 
 *::-webkit-scrollbar-corner {
@@ -155,16 +157,16 @@ body,
 }
 
 .code-box {
-  @apply break-words rounded-md bg-wp-code-inline-100 p-4 text-sm text-wp-code-inline-text-100;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md p-4 text-sm break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply rounded-md bg-wp-code-inline-100 px-1.5 py-0.5 text-wp-code-inline-text-100;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md px-1.5 py-0.5;
 }
 
 .code-box-log {
-  @apply break-words bg-wp-code-300 p-4 text-wp-code-text-100;
+  @apply bg-wp-code-300 text-wp-code-text-100 p-4 break-words;
   white-space: pre-wrap;
 }
diff --git a/web/src/tailwind.css b/web/src/tailwind.css
index d2d69e937..99c2f69ec 100644
--- a/web/src/tailwind.css
+++ b/web/src/tailwind.css
@@ -1,19 +1,1059 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@layer components {
-  .hover-effect {
-    @apply transition-colors duration-100 hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-5;
-  }
+@plugin '@tailwindcss/typography';
 
-  .w-fill {
-    width: -webkit-fill-available;
-    width: -moz-available;
-    width: stretch;
-  }
+@source './**/*.css';
 
-  .display-unset {
-    display: unset;
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-int-wp-primary-100: #8ad97f;
+  --color-int-wp-primary-200: #68c464;
+  --color-int-wp-primary-300: #4caf50;
+  --color-int-wp-primary-400: #369943;
+  --color-int-wp-primary-500: #248438;
+  --color-int-wp-primary-600: #166e30;
+
+  --color-int-wp-secondary-200: #434858;
+  --color-int-wp-secondary-300: #383c4a;
+  --color-int-wp-secondary-400: #303440;
+  --color-int-wp-secondary-500: #2d313d;
+  --color-int-wp-secondary-600: #2a2e3a;
+  --color-int-wp-secondary-700: #222631;
+  --color-int-wp-secondary-800: #1b1f28;
+
+  --color-int-wp-control-neutral-100: #fff;
+  --color-int-wp-control-neutral-200: #d1d5db;
+  --color-int-wp-control-neutral-300: #9ca3af;
+
+  --color-int-wp-control-info-100: #0e7490;
+  --color-int-wp-control-info-200: #155e75;
+  --color-int-wp-control-info-300: #164e63;
+
+  --color-int-wp-control-info-dark-100: #266778;
+  --color-int-wp-control-info-dark-200: #2a5360;
+  --color-int-wp-control-info-dark-300: #284651;
+
+  --color-int-wp-control-ok-100: #369943;
+  --color-int-wp-control-ok-200: #248438;
+  --color-int-wp-control-ok-300: #166e30;
+
+  --color-int-wp-control-ok-dark-100: #408f4b;
+  --color-int-wp-control-ok-dark-200: #2c7c3d;
+  --color-int-wp-control-ok-dark-300: #1d6733;
+
+  --color-int-wp-error-100: #b91c1c;
+  --color-int-wp-error-200: #991b1b;
+  --color-int-wp-error-300: #7f1d1d;
+
+  --color-int-wp-state-neutral-100: #4b5563;
+
+  --color-int-wp-state-ok-100: #16a34a;
+
+  --color-int-wp-state-ok-dark-100: #29904f;
+
+  --color-int-wp-state-info-100: #0891b2;
+
+  --color-int-wp-state-info-dark-100: #1b869f;
+
+  --color-int-wp-state-warn-100: #facc15;
+
+  --color-int-wp-state-warn-dark-100: #e2be2d;
+
+  --color-int-wp-hint-warn-100: #fef9c3;
+  --color-int-wp-hint-warn-200: #fde047;
+
+  --color-int-wp-hint-warn-dark-100: #c5ba7f;
+  --color-int-wp-hint-warn-dark-200: #a18e51;
+
+  --color-wp-background-100: var(--wp-background-100);
+  --color-wp-background-200: var(--wp-background-200);
+  --color-wp-background-300: var(--wp-background-300);
+  --color-wp-background-400: var(--wp-background-400);
+
+  --color-wp-text-100: var(--wp-text-100);
+  --color-wp-text-200: var(--wp-text-200);
+
+  --color-wp-text-alt-100: var(--wp-text-alt-100);
+
+  --color-wp-primary-100: var(--wp-primary-100);
+  --color-wp-primary-200: var(--wp-primary-200);
+  --color-wp-primary-300: var(--wp-primary-300);
+
+  --color-wp-primary-text-100: var(--wp-primary-text-100);
+
+  --color-wp-control-neutral-100: var(--wp-control-neutral-100);
+  --color-wp-control-neutral-200: var(--wp-control-neutral-200);
+  --color-wp-control-neutral-300: var(--wp-control-neutral-300);
+
+  --color-wp-control-info-100: var(--wp-control-info-100);
+  --color-wp-control-info-200: var(--wp-control-info-200);
+  --color-wp-control-info-300: var(--wp-control-info-300);
+
+  --color-wp-control-ok-100: var(--wp-control-ok-100);
+  --color-wp-control-ok-200: var(--wp-control-ok-200);
+  --color-wp-control-ok-300: var(--wp-control-ok-300);
+
+  --color-wp-error-100: var(--wp-error-100);
+  --color-wp-error-200: var(--wp-error-200);
+  --color-wp-error-300: var(--wp-error-300);
+
+  --color-wp-state-neutral-100: var(--wp-state-neutral-100);
+
+  --color-wp-state-ok-100: var(--wp-state-ok-100);
+
+  --color-wp-state-info-100: var(--wp-state-info-100);
+
+  --color-wp-state-warn-100: var(--wp-state-warn-100);
+
+  --color-wp-hint-warn-100: var(--wp-hint-warn-100);
+  --color-wp-hint-warn-200: var(--wp-hint-warn-200);
+
+  --color-wp-code-inline-100: var(--wp-code-inline-100);
+  --color-wp-code-inline-200: var(--wp-code-inline-200);
+
+  --color-wp-code-inline-text-100: var(--wp-code-inline-text-100);
+
+  --color-wp-code-100: var(--wp-code-100);
+  --color-wp-code-200: var(--wp-code-200);
+  --color-wp-code-300: var(--wp-code-300);
+
+  --color-wp-code-text-100: var(--wp-code-text-100);
+
+  --color-wp-code-text-alt-100: var(--wp-code-text-alt-100);
+
+  --color-wp-link-100: var(--wp-link-100);
+  --color-wp-link-200: var(--wp-link-200);
+
+  --spacing-sm: 24rem;
+  --spacing-md: 28rem;
+  --spacing-lg: 32rem;
+  --spacing-xl: 36rem;
+  --spacing-2xl: 42rem;
+  --spacing-3xl: 48rem;
+
+  --font-sans:
+    system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif;
+
+  --transition-property-height: max-height;
+
+  --stroke-int-wp-primary-100: #8ad97f;
+  --stroke-int-wp-primary-200: #68c464;
+  --stroke-int-wp-primary-300: #4caf50;
+  --stroke-int-wp-primary-400: #369943;
+  --stroke-int-wp-primary-500: #248438;
+  --stroke-int-wp-primary-600: #166e30;
+
+  --stroke-int-wp-secondary-200: #434858;
+  --stroke-int-wp-secondary-300: #383c4a;
+  --stroke-int-wp-secondary-400: #303440;
+  --stroke-int-wp-secondary-500: #2d313d;
+  --stroke-int-wp-secondary-600: #2a2e3a;
+  --stroke-int-wp-secondary-700: #222631;
+  --stroke-int-wp-secondary-800: #1b1f28;
+
+  --stroke-int-wp-control-neutral-100: #fff;
+  --stroke-int-wp-control-neutral-200: #d1d5db;
+  --stroke-int-wp-control-neutral-300: #9ca3af;
+
+  --stroke-int-wp-control-info-100: #0e7490;
+  --stroke-int-wp-control-info-200: #155e75;
+  --stroke-int-wp-control-info-300: #164e63;
+
+  --stroke-int-wp-control-info-dark-100: #266778;
+  --stroke-int-wp-control-info-dark-200: #2a5360;
+  --stroke-int-wp-control-info-dark-300: #284651;
+
+  --stroke-int-wp-control-ok-100: #369943;
+  --stroke-int-wp-control-ok-200: #248438;
+  --stroke-int-wp-control-ok-300: #166e30;
+
+  --stroke-int-wp-control-ok-dark-100: #408f4b;
+  --stroke-int-wp-control-ok-dark-200: #2c7c3d;
+  --stroke-int-wp-control-ok-dark-300: #1d6733;
+
+  --stroke-int-wp-error-100: #b91c1c;
+  --stroke-int-wp-error-200: #991b1b;
+  --stroke-int-wp-error-300: #7f1d1d;
+
+  --stroke-int-wp-state-neutral-100: #4b5563;
+
+  --stroke-int-wp-state-ok-100: #16a34a;
+
+  --stroke-int-wp-state-ok-dark-100: #29904f;
+
+  --stroke-int-wp-state-info-100: #0891b2;
+
+  --stroke-int-wp-state-info-dark-100: #1b869f;
+
+  --stroke-int-wp-state-warn-100: #facc15;
+
+  --stroke-int-wp-state-warn-dark-100: #e2be2d;
+
+  --stroke-int-wp-hint-warn-100: #fef9c3;
+  --stroke-int-wp-hint-warn-200: #fde047;
+
+  --stroke-int-wp-hint-warn-dark-100: #c5ba7f;
+  --stroke-int-wp-hint-warn-dark-200: #a18e51;
+
+  --stroke-wp-background-100: var(--wp-background-100);
+  --stroke-wp-background-200: var(--wp-background-200);
+  --stroke-wp-background-300: var(--wp-background-300);
+  --stroke-wp-background-400: var(--wp-background-400);
+
+  --stroke-wp-text-100: var(--wp-text-100);
+  --stroke-wp-text-200: var(--wp-text-200);
+
+  --stroke-wp-text-alt-100: var(--wp-text-alt-100);
+
+  --stroke-wp-primary-100: var(--wp-primary-100);
+  --stroke-wp-primary-200: var(--wp-primary-200);
+  --stroke-wp-primary-300: var(--wp-primary-300);
+
+  --stroke-wp-primary-text-100: var(--wp-primary-text-100);
+
+  --stroke-wp-control-neutral-100: var(--wp-control-neutral-100);
+  --stroke-wp-control-neutral-200: var(--wp-control-neutral-200);
+  --stroke-wp-control-neutral-300: var(--wp-control-neutral-300);
+
+  --stroke-wp-control-info-100: var(--wp-control-info-100);
+  --stroke-wp-control-info-200: var(--wp-control-info-200);
+  --stroke-wp-control-info-300: var(--wp-control-info-300);
+
+  --stroke-wp-control-ok-100: var(--wp-control-ok-100);
+  --stroke-wp-control-ok-200: var(--wp-control-ok-200);
+  --stroke-wp-control-ok-300: var(--wp-control-ok-300);
+
+  --stroke-wp-error-100: var(--wp-error-100);
+  --stroke-wp-error-200: var(--wp-error-200);
+  --stroke-wp-error-300: var(--wp-error-300);
+
+  --stroke-wp-state-neutral-100: var(--wp-state-neutral-100);
+
+  --stroke-wp-state-ok-100: var(--wp-state-ok-100);
+
+  --stroke-wp-state-info-100: var(--wp-state-info-100);
+
+  --stroke-wp-state-warn-100: var(--wp-state-warn-100);
+
+  --stroke-wp-hint-warn-100: var(--wp-hint-warn-100);
+  --stroke-wp-hint-warn-200: var(--wp-hint-warn-200);
+
+  --stroke-wp-code-inline-100: var(--wp-code-inline-100);
+  --stroke-wp-code-inline-200: var(--wp-code-inline-200);
+
+  --stroke-wp-code-inline-text-100: var(--wp-code-inline-text-100);
+
+  --stroke-wp-code-100: var(--wp-code-100);
+  --stroke-wp-code-200: var(--wp-code-200);
+  --stroke-wp-code-300: var(--wp-code-300);
+
+  --stroke-wp-code-text-100: var(--wp-code-text-100);
+
+  --stroke-wp-code-text-alt-100: var(--wp-code-text-alt-100);
+
+  --stroke-wp-link-100: var(--wp-link-100);
+  --stroke-wp-link-200: var(--wp-link-200);
+
+  --stroke-red-50: oklch(0.971 0.013 17.38);
+  --stroke-red-100: oklch(0.936 0.032 17.717);
+  --stroke-red-200: oklch(0.885 0.062 18.334);
+  --stroke-red-300: oklch(0.808 0.114 19.571);
+  --stroke-red-400: oklch(0.704 0.191 22.216);
+  --stroke-red-500: oklch(0.637 0.237 25.331);
+  --stroke-red-600: oklch(0.577 0.245 27.325);
+  --stroke-red-700: oklch(0.505 0.213 27.518);
+  --stroke-red-800: oklch(0.444 0.177 26.899);
+  --stroke-red-900: oklch(0.396 0.141 25.723);
+  --stroke-red-950: oklch(0.258 0.092 26.042);
+  --stroke-orange-50: oklch(0.98 0.016 73.684);
+  --stroke-orange-100: oklch(0.954 0.038 75.164);
+  --stroke-orange-200: oklch(0.901 0.076 70.697);
+  --stroke-orange-300: oklch(0.837 0.128 66.29);
+  --stroke-orange-400: oklch(0.75 0.183 55.934);
+  --stroke-orange-500: oklch(0.705 0.213 47.604);
+  --stroke-orange-600: oklch(0.646 0.222 41.116);
+  --stroke-orange-700: oklch(0.553 0.195 38.402);
+  --stroke-orange-800: oklch(0.47 0.157 37.304);
+  --stroke-orange-900: oklch(0.408 0.123 38.172);
+  --stroke-orange-950: oklch(0.266 0.079 36.259);
+  --stroke-amber-50: oklch(0.987 0.022 95.277);
+  --stroke-amber-100: oklch(0.962 0.059 95.617);
+  --stroke-amber-200: oklch(0.924 0.12 95.746);
+  --stroke-amber-300: oklch(0.879 0.169 91.605);
+  --stroke-amber-400: oklch(0.828 0.189 84.429);
+  --stroke-amber-500: oklch(0.769 0.188 70.08);
+  --stroke-amber-600: oklch(0.666 0.179 58.318);
+  --stroke-amber-700: oklch(0.555 0.163 48.998);
+  --stroke-amber-800: oklch(0.473 0.137 46.201);
+  --stroke-amber-900: oklch(0.414 0.112 45.904);
+  --stroke-amber-950: oklch(0.279 0.077 45.635);
+  --stroke-yellow-50: oklch(0.987 0.026 102.212);
+  --stroke-yellow-100: oklch(0.973 0.071 103.193);
+  --stroke-yellow-200: oklch(0.945 0.129 101.54);
+  --stroke-yellow-300: oklch(0.905 0.182 98.111);
+  --stroke-yellow-400: oklch(0.852 0.199 91.936);
+  --stroke-yellow-500: oklch(0.795 0.184 86.047);
+  --stroke-yellow-600: oklch(0.681 0.162 75.834);
+  --stroke-yellow-700: oklch(0.554 0.135 66.442);
+  --stroke-yellow-800: oklch(0.476 0.114 61.907);
+  --stroke-yellow-900: oklch(0.421 0.095 57.708);
+  --stroke-yellow-950: oklch(0.286 0.066 53.813);
+  --stroke-lime-50: oklch(0.986 0.031 120.757);
+  --stroke-lime-100: oklch(0.967 0.067 122.328);
+  --stroke-lime-200: oklch(0.938 0.127 124.321);
+  --stroke-lime-300: oklch(0.897 0.196 126.665);
+  --stroke-lime-400: oklch(0.841 0.238 128.85);
+  --stroke-lime-500: oklch(0.768 0.233 130.85);
+  --stroke-lime-600: oklch(0.648 0.2 131.684);
+  --stroke-lime-700: oklch(0.532 0.157 131.589);
+  --stroke-lime-800: oklch(0.453 0.124 130.933);
+  --stroke-lime-900: oklch(0.405 0.101 131.063);
+  --stroke-lime-950: oklch(0.274 0.072 132.109);
+  --stroke-green-50: oklch(0.982 0.018 155.826);
+  --stroke-green-100: oklch(0.962 0.044 156.743);
+  --stroke-green-200: oklch(0.925 0.084 155.995);
+  --stroke-green-300: oklch(0.871 0.15 154.449);
+  --stroke-green-400: oklch(0.792 0.209 151.711);
+  --stroke-green-500: oklch(0.723 0.219 149.579);
+  --stroke-green-600: oklch(0.627 0.194 149.214);
+  --stroke-green-700: oklch(0.527 0.154 150.069);
+  --stroke-green-800: oklch(0.448 0.119 151.328);
+  --stroke-green-900: oklch(0.393 0.095 152.535);
+  --stroke-green-950: oklch(0.266 0.065 152.934);
+  --stroke-emerald-50: oklch(0.979 0.021 166.113);
+  --stroke-emerald-100: oklch(0.95 0.052 163.051);
+  --stroke-emerald-200: oklch(0.905 0.093 164.15);
+  --stroke-emerald-300: oklch(0.845 0.143 164.978);
+  --stroke-emerald-400: oklch(0.765 0.177 163.223);
+  --stroke-emerald-500: oklch(0.696 0.17 162.48);
+  --stroke-emerald-600: oklch(0.596 0.145 163.225);
+  --stroke-emerald-700: oklch(0.508 0.118 165.612);
+  --stroke-emerald-800: oklch(0.432 0.095 166.913);
+  --stroke-emerald-900: oklch(0.378 0.077 168.94);
+  --stroke-emerald-950: oklch(0.262 0.051 172.552);
+  --stroke-teal-50: oklch(0.984 0.014 180.72);
+  --stroke-teal-100: oklch(0.953 0.051 180.801);
+  --stroke-teal-200: oklch(0.91 0.096 180.426);
+  --stroke-teal-300: oklch(0.855 0.138 181.071);
+  --stroke-teal-400: oklch(0.777 0.152 181.912);
+  --stroke-teal-500: oklch(0.704 0.14 182.503);
+  --stroke-teal-600: oklch(0.6 0.118 184.704);
+  --stroke-teal-700: oklch(0.511 0.096 186.391);
+  --stroke-teal-800: oklch(0.437 0.078 188.216);
+  --stroke-teal-900: oklch(0.386 0.063 188.416);
+  --stroke-teal-950: oklch(0.277 0.046 192.524);
+  --stroke-cyan-50: oklch(0.984 0.019 200.873);
+  --stroke-cyan-100: oklch(0.956 0.045 203.388);
+  --stroke-cyan-200: oklch(0.917 0.08 205.041);
+  --stroke-cyan-300: oklch(0.865 0.127 207.078);
+  --stroke-cyan-400: oklch(0.789 0.154 211.53);
+  --stroke-cyan-500: oklch(0.715 0.143 215.221);
+  --stroke-cyan-600: oklch(0.609 0.126 221.723);
+  --stroke-cyan-700: oklch(0.52 0.105 223.128);
+  --stroke-cyan-800: oklch(0.45 0.085 224.283);
+  --stroke-cyan-900: oklch(0.398 0.07 227.392);
+  --stroke-cyan-950: oklch(0.302 0.056 229.695);
+  --stroke-sky-50: oklch(0.977 0.013 236.62);
+  --stroke-sky-100: oklch(0.951 0.026 236.824);
+  --stroke-sky-200: oklch(0.901 0.058 230.902);
+  --stroke-sky-300: oklch(0.828 0.111 230.318);
+  --stroke-sky-400: oklch(0.746 0.16 232.661);
+  --stroke-sky-500: oklch(0.685 0.169 237.323);
+  --stroke-sky-600: oklch(0.588 0.158 241.966);
+  --stroke-sky-700: oklch(0.5 0.134 242.749);
+  --stroke-sky-800: oklch(0.443 0.11 240.79);
+  --stroke-sky-900: oklch(0.391 0.09 240.876);
+  --stroke-sky-950: oklch(0.293 0.066 243.157);
+  --stroke-blue-50: oklch(0.97 0.014 254.604);
+  --stroke-blue-100: oklch(0.932 0.032 255.585);
+  --stroke-blue-200: oklch(0.882 0.059 254.128);
+  --stroke-blue-300: oklch(0.809 0.105 251.813);
+  --stroke-blue-400: oklch(0.707 0.165 254.624);
+  --stroke-blue-500: oklch(0.623 0.214 259.815);
+  --stroke-blue-600: oklch(0.546 0.245 262.881);
+  --stroke-blue-700: oklch(0.488 0.243 264.376);
+  --stroke-blue-800: oklch(0.424 0.199 265.638);
+  --stroke-blue-900: oklch(0.379 0.146 265.522);
+  --stroke-blue-950: oklch(0.282 0.091 267.935);
+  --stroke-indigo-50: oklch(0.962 0.018 272.314);
+  --stroke-indigo-100: oklch(0.93 0.034 272.788);
+  --stroke-indigo-200: oklch(0.87 0.065 274.039);
+  --stroke-indigo-300: oklch(0.785 0.115 274.713);
+  --stroke-indigo-400: oklch(0.673 0.182 276.935);
+  --stroke-indigo-500: oklch(0.585 0.233 277.117);
+  --stroke-indigo-600: oklch(0.511 0.262 276.966);
+  --stroke-indigo-700: oklch(0.457 0.24 277.023);
+  --stroke-indigo-800: oklch(0.398 0.195 277.366);
+  --stroke-indigo-900: oklch(0.359 0.144 278.697);
+  --stroke-indigo-950: oklch(0.257 0.09 281.288);
+  --stroke-violet-50: oklch(0.969 0.016 293.756);
+  --stroke-violet-100: oklch(0.943 0.029 294.588);
+  --stroke-violet-200: oklch(0.894 0.057 293.283);
+  --stroke-violet-300: oklch(0.811 0.111 293.571);
+  --stroke-violet-400: oklch(0.702 0.183 293.541);
+  --stroke-violet-500: oklch(0.606 0.25 292.717);
+  --stroke-violet-600: oklch(0.541 0.281 293.009);
+  --stroke-violet-700: oklch(0.491 0.27 292.581);
+  --stroke-violet-800: oklch(0.432 0.232 292.759);
+  --stroke-violet-900: oklch(0.38 0.189 293.745);
+  --stroke-violet-950: oklch(0.283 0.141 291.089);
+  --stroke-purple-50: oklch(0.977 0.014 308.299);
+  --stroke-purple-100: oklch(0.946 0.033 307.174);
+  --stroke-purple-200: oklch(0.902 0.063 306.703);
+  --stroke-purple-300: oklch(0.827 0.119 306.383);
+  --stroke-purple-400: oklch(0.714 0.203 305.504);
+  --stroke-purple-500: oklch(0.627 0.265 303.9);
+  --stroke-purple-600: oklch(0.558 0.288 302.321);
+  --stroke-purple-700: oklch(0.496 0.265 301.924);
+  --stroke-purple-800: oklch(0.438 0.218 303.724);
+  --stroke-purple-900: oklch(0.381 0.176 304.987);
+  --stroke-purple-950: oklch(0.291 0.149 302.717);
+  --stroke-fuchsia-50: oklch(0.977 0.017 320.058);
+  --stroke-fuchsia-100: oklch(0.952 0.037 318.852);
+  --stroke-fuchsia-200: oklch(0.903 0.076 319.62);
+  --stroke-fuchsia-300: oklch(0.833 0.145 321.434);
+  --stroke-fuchsia-400: oklch(0.74 0.238 322.16);
+  --stroke-fuchsia-500: oklch(0.667 0.295 322.15);
+  --stroke-fuchsia-600: oklch(0.591 0.293 322.896);
+  --stroke-fuchsia-700: oklch(0.518 0.253 323.949);
+  --stroke-fuchsia-800: oklch(0.452 0.211 324.591);
+  --stroke-fuchsia-900: oklch(0.401 0.17 325.612);
+  --stroke-fuchsia-950: oklch(0.293 0.136 325.661);
+  --stroke-pink-50: oklch(0.971 0.014 343.198);
+  --stroke-pink-100: oklch(0.948 0.028 342.258);
+  --stroke-pink-200: oklch(0.899 0.061 343.231);
+  --stroke-pink-300: oklch(0.823 0.12 346.018);
+  --stroke-pink-400: oklch(0.718 0.202 349.761);
+  --stroke-pink-500: oklch(0.656 0.241 354.308);
+  --stroke-pink-600: oklch(0.592 0.249 0.584);
+  --stroke-pink-700: oklch(0.525 0.223 3.958);
+  --stroke-pink-800: oklch(0.459 0.187 3.815);
+  --stroke-pink-900: oklch(0.408 0.153 2.432);
+  --stroke-pink-950: oklch(0.284 0.109 3.907);
+  --stroke-rose-50: oklch(0.969 0.015 12.422);
+  --stroke-rose-100: oklch(0.941 0.03 12.58);
+  --stroke-rose-200: oklch(0.892 0.058 10.001);
+  --stroke-rose-300: oklch(0.81 0.117 11.638);
+  --stroke-rose-400: oklch(0.712 0.194 13.428);
+  --stroke-rose-500: oklch(0.645 0.246 16.439);
+  --stroke-rose-600: oklch(0.586 0.253 17.585);
+  --stroke-rose-700: oklch(0.514 0.222 16.935);
+  --stroke-rose-800: oklch(0.455 0.188 13.697);
+  --stroke-rose-900: oklch(0.41 0.159 10.272);
+  --stroke-rose-950: oklch(0.271 0.105 12.094);
+  --stroke-slate-50: oklch(0.984 0.003 247.858);
+  --stroke-slate-100: oklch(0.968 0.007 247.896);
+  --stroke-slate-200: oklch(0.929 0.013 255.508);
+  --stroke-slate-300: oklch(0.869 0.022 252.894);
+  --stroke-slate-400: oklch(0.704 0.04 256.788);
+  --stroke-slate-500: oklch(0.554 0.046 257.417);
+  --stroke-slate-600: oklch(0.446 0.043 257.281);
+  --stroke-slate-700: oklch(0.372 0.044 257.287);
+  --stroke-slate-800: oklch(0.279 0.041 260.031);
+  --stroke-slate-900: oklch(0.208 0.042 265.755);
+  --stroke-slate-950: oklch(0.129 0.042 264.695);
+  --stroke-gray-50: oklch(0.985 0.002 247.839);
+  --stroke-gray-100: oklch(0.967 0.003 264.542);
+  --stroke-gray-200: oklch(0.928 0.006 264.531);
+  --stroke-gray-300: oklch(0.872 0.01 258.338);
+  --stroke-gray-400: oklch(0.707 0.022 261.325);
+  --stroke-gray-500: oklch(0.551 0.027 264.364);
+  --stroke-gray-600: oklch(0.446 0.03 256.802);
+  --stroke-gray-700: oklch(0.373 0.034 259.733);
+  --stroke-gray-800: oklch(0.278 0.033 256.848);
+  --stroke-gray-900: oklch(0.21 0.034 264.665);
+  --stroke-gray-950: oklch(0.13 0.028 261.692);
+  --stroke-zinc-50: oklch(0.985 0 0);
+  --stroke-zinc-100: oklch(0.967 0.001 286.375);
+  --stroke-zinc-200: oklch(0.92 0.004 286.32);
+  --stroke-zinc-300: oklch(0.871 0.006 286.286);
+  --stroke-zinc-400: oklch(0.705 0.015 286.067);
+  --stroke-zinc-500: oklch(0.552 0.016 285.938);
+  --stroke-zinc-600: oklch(0.442 0.017 285.786);
+  --stroke-zinc-700: oklch(0.37 0.013 285.805);
+  --stroke-zinc-800: oklch(0.274 0.006 286.033);
+  --stroke-zinc-900: oklch(0.21 0.006 285.885);
+  --stroke-zinc-950: oklch(0.141 0.005 285.823);
+  --stroke-neutral-50: oklch(0.985 0 0);
+  --stroke-neutral-100: oklch(0.97 0 0);
+  --stroke-neutral-200: oklch(0.922 0 0);
+  --stroke-neutral-300: oklch(0.87 0 0);
+  --stroke-neutral-400: oklch(0.708 0 0);
+  --stroke-neutral-500: oklch(0.556 0 0);
+  --stroke-neutral-600: oklch(0.439 0 0);
+  --stroke-neutral-700: oklch(0.371 0 0);
+  --stroke-neutral-800: oklch(0.269 0 0);
+  --stroke-neutral-900: oklch(0.205 0 0);
+  --stroke-neutral-950: oklch(0.145 0 0);
+  --stroke-stone-50: oklch(0.985 0.001 106.423);
+  --stroke-stone-100: oklch(0.97 0.001 106.424);
+  --stroke-stone-200: oklch(0.923 0.003 48.717);
+  --stroke-stone-300: oklch(0.869 0.005 56.366);
+  --stroke-stone-400: oklch(0.709 0.01 56.259);
+  --stroke-stone-500: oklch(0.553 0.013 58.071);
+  --stroke-stone-600: oklch(0.444 0.011 73.639);
+  --stroke-stone-700: oklch(0.374 0.01 67.558);
+  --stroke-stone-800: oklch(0.268 0.007 34.298);
+  --stroke-stone-900: oklch(0.216 0.006 56.043);
+  --stroke-stone-950: oklch(0.147 0.004 49.25);
+  --stroke-black: #000;
+  --stroke-white: #fff;
+  --stroke-int-wp-primary-100: #8ad97f;
+  --stroke-int-wp-primary-200: #68c464;
+  --stroke-int-wp-primary-300: #4caf50;
+  --stroke-int-wp-primary-400: #369943;
+  --stroke-int-wp-primary-500: #248438;
+  --stroke-int-wp-primary-600: #166e30;
+  --stroke-int-wp-secondary-200: #434858;
+  --stroke-int-wp-secondary-300: #383c4a;
+  --stroke-int-wp-secondary-400: #303440;
+  --stroke-int-wp-secondary-500: #2d313d;
+  --stroke-int-wp-secondary-600: #2a2e3a;
+  --stroke-int-wp-secondary-700: #222631;
+  --stroke-int-wp-secondary-800: #1b1f28;
+  --stroke-int-wp-control-neutral-100: #fff;
+  --stroke-int-wp-control-neutral-200: #d1d5db;
+  --stroke-int-wp-control-neutral-300: #9ca3af;
+  --stroke-int-wp-control-info-100: #0e7490;
+  --stroke-int-wp-control-info-200: #155e75;
+  --stroke-int-wp-control-info-300: #164e63;
+  --stroke-int-wp-control-info-dark-100: #266778;
+  --stroke-int-wp-control-info-dark-200: #2a5360;
+  --stroke-int-wp-control-info-dark-300: #284651;
+  --stroke-int-wp-control-ok-100: #369943;
+  --stroke-int-wp-control-ok-200: #248438;
+  --stroke-int-wp-control-ok-300: #166e30;
+  --stroke-int-wp-control-ok-dark-100: #408f4b;
+  --stroke-int-wp-control-ok-dark-200: #2c7c3d;
+  --stroke-int-wp-control-ok-dark-300: #1d6733;
+  --stroke-int-wp-error-100: #b91c1c;
+  --stroke-int-wp-error-200: #991b1b;
+  --stroke-int-wp-error-300: #7f1d1d;
+  --stroke-int-wp-state-neutral-100: #4b5563;
+  --stroke-int-wp-state-ok-100: #16a34a;
+  --stroke-int-wp-state-ok-dark-100: #29904f;
+  --stroke-int-wp-state-info-100: #0891b2;
+  --stroke-int-wp-state-info-dark-100: #1b869f;
+  --stroke-int-wp-state-warn-100: #facc15;
+  --stroke-int-wp-state-warn-dark-100: #e2be2d;
+  --stroke-int-wp-hint-warn-100: #fef9c3;
+  --stroke-int-wp-hint-warn-200: #fde047;
+  --stroke-int-wp-hint-warn-dark-100: #c5ba7f;
+  --stroke-int-wp-hint-warn-dark-200: #a18e51;
+  --stroke-wp-background-100: var(--wp-background-100);
+  --stroke-wp-background-200: var(--wp-background-200);
+  --stroke-wp-background-300: var(--wp-background-300);
+  --stroke-wp-background-400: var(--wp-background-400);
+  --stroke-wp-text-100: var(--wp-text-100);
+  --stroke-wp-text-200: var(--wp-text-200);
+  --stroke-wp-text-alt-100: var(--wp-text-alt-100);
+  --stroke-wp-primary-100: var(--wp-primary-100);
+  --stroke-wp-primary-200: var(--wp-primary-200);
+  --stroke-wp-primary-300: var(--wp-primary-300);
+  --stroke-wp-primary-text-100: var(--wp-primary-text-100);
+  --stroke-wp-control-neutral-100: var(--wp-control-neutral-100);
+  --stroke-wp-control-neutral-200: var(--wp-control-neutral-200);
+  --stroke-wp-control-neutral-300: var(--wp-control-neutral-300);
+  --stroke-wp-control-info-100: var(--wp-control-info-100);
+  --stroke-wp-control-info-200: var(--wp-control-info-200);
+  --stroke-wp-control-info-300: var(--wp-control-info-300);
+  --stroke-wp-control-ok-100: var(--wp-control-ok-100);
+  --stroke-wp-control-ok-200: var(--wp-control-ok-200);
+  --stroke-wp-control-ok-300: var(--wp-control-ok-300);
+  --stroke-wp-error-100: var(--wp-error-100);
+  --stroke-wp-error-200: var(--wp-error-200);
+  --stroke-wp-error-300: var(--wp-error-300);
+  --stroke-wp-state-neutral-100: var(--wp-state-neutral-100);
+  --stroke-wp-state-ok-100: var(--wp-state-ok-100);
+  --stroke-wp-state-info-100: var(--wp-state-info-100);
+  --stroke-wp-state-warn-100: var(--wp-state-warn-100);
+  --stroke-wp-hint-warn-100: var(--wp-hint-warn-100);
+  --stroke-wp-hint-warn-200: var(--wp-hint-warn-200);
+  --stroke-wp-code-inline-100: var(--wp-code-inline-100);
+  --stroke-wp-code-inline-200: var(--wp-code-inline-200);
+  --stroke-wp-code-inline-text-100: var(--wp-code-inline-text-100);
+  --stroke-wp-code-100: var(--wp-code-100);
+  --stroke-wp-code-200: var(--wp-code-200);
+  --stroke-wp-code-300: var(--wp-code-300);
+  --stroke-wp-code-text-100: var(--wp-code-text-100);
+  --stroke-wp-code-text-alt-100: var(--wp-code-text-alt-100);
+  --stroke-wp-link-100: var(--wp-link-100);
+  --stroke-wp-link-200: var(--wp-link-200);
+
+  --fill-int-wp-primary-100: #8ad97f;
+  --fill-int-wp-primary-200: #68c464;
+  --fill-int-wp-primary-300: #4caf50;
+  --fill-int-wp-primary-400: #369943;
+  --fill-int-wp-primary-500: #248438;
+  --fill-int-wp-primary-600: #166e30;
+
+  --fill-int-wp-secondary-200: #434858;
+  --fill-int-wp-secondary-300: #383c4a;
+  --fill-int-wp-secondary-400: #303440;
+  --fill-int-wp-secondary-500: #2d313d;
+  --fill-int-wp-secondary-600: #2a2e3a;
+  --fill-int-wp-secondary-700: #222631;
+  --fill-int-wp-secondary-800: #1b1f28;
+
+  --fill-int-wp-control-neutral-100: #fff;
+  --fill-int-wp-control-neutral-200: #d1d5db;
+  --fill-int-wp-control-neutral-300: #9ca3af;
+
+  --fill-int-wp-control-info-100: #0e7490;
+  --fill-int-wp-control-info-200: #155e75;
+  --fill-int-wp-control-info-300: #164e63;
+
+  --fill-int-wp-control-info-dark-100: #266778;
+  --fill-int-wp-control-info-dark-200: #2a5360;
+  --fill-int-wp-control-info-dark-300: #284651;
+
+  --fill-int-wp-control-ok-100: #369943;
+  --fill-int-wp-control-ok-200: #248438;
+  --fill-int-wp-control-ok-300: #166e30;
+
+  --fill-int-wp-control-ok-dark-100: #408f4b;
+  --fill-int-wp-control-ok-dark-200: #2c7c3d;
+  --fill-int-wp-control-ok-dark-300: #1d6733;
+
+  --fill-int-wp-error-100: #b91c1c;
+  --fill-int-wp-error-200: #991b1b;
+  --fill-int-wp-error-300: #7f1d1d;
+
+  --fill-int-wp-state-neutral-100: #4b5563;
+
+  --fill-int-wp-state-ok-100: #16a34a;
+
+  --fill-int-wp-state-ok-dark-100: #29904f;
+
+  --fill-int-wp-state-info-100: #0891b2;
+
+  --fill-int-wp-state-info-dark-100: #1b869f;
+
+  --fill-int-wp-state-warn-100: #facc15;
+
+  --fill-int-wp-state-warn-dark-100: #e2be2d;
+
+  --fill-int-wp-hint-warn-100: #fef9c3;
+  --fill-int-wp-hint-warn-200: #fde047;
+
+  --fill-int-wp-hint-warn-dark-100: #c5ba7f;
+  --fill-int-wp-hint-warn-dark-200: #a18e51;
+
+  --fill-wp-background-100: var(--wp-background-100);
+  --fill-wp-background-200: var(--wp-background-200);
+  --fill-wp-background-300: var(--wp-background-300);
+  --fill-wp-background-400: var(--wp-background-400);
+
+  --fill-wp-text-100: var(--wp-text-100);
+  --fill-wp-text-200: var(--wp-text-200);
+
+  --fill-wp-text-alt-100: var(--wp-text-alt-100);
+
+  --fill-wp-primary-100: var(--wp-primary-100);
+  --fill-wp-primary-200: var(--wp-primary-200);
+  --fill-wp-primary-300: var(--wp-primary-300);
+
+  --fill-wp-primary-text-100: var(--wp-primary-text-100);
+
+  --fill-wp-control-neutral-100: var(--wp-control-neutral-100);
+  --fill-wp-control-neutral-200: var(--wp-control-neutral-200);
+  --fill-wp-control-neutral-300: var(--wp-control-neutral-300);
+
+  --fill-wp-control-info-100: var(--wp-control-info-100);
+  --fill-wp-control-info-200: var(--wp-control-info-200);
+  --fill-wp-control-info-300: var(--wp-control-info-300);
+
+  --fill-wp-control-ok-100: var(--wp-control-ok-100);
+  --fill-wp-control-ok-200: var(--wp-control-ok-200);
+  --fill-wp-control-ok-300: var(--wp-control-ok-300);
+
+  --fill-wp-error-100: var(--wp-error-100);
+  --fill-wp-error-200: var(--wp-error-200);
+  --fill-wp-error-300: var(--wp-error-300);
+
+  --fill-wp-state-neutral-100: var(--wp-state-neutral-100);
+
+  --fill-wp-state-ok-100: var(--wp-state-ok-100);
+
+  --fill-wp-state-info-100: var(--wp-state-info-100);
+
+  --fill-wp-state-warn-100: var(--wp-state-warn-100);
+
+  --fill-wp-hint-warn-100: var(--wp-hint-warn-100);
+  --fill-wp-hint-warn-200: var(--wp-hint-warn-200);
+
+  --fill-wp-code-inline-100: var(--wp-code-inline-100);
+  --fill-wp-code-inline-200: var(--wp-code-inline-200);
+
+  --fill-wp-code-inline-text-100: var(--wp-code-inline-text-100);
+
+  --fill-wp-code-100: var(--wp-code-100);
+  --fill-wp-code-200: var(--wp-code-200);
+  --fill-wp-code-300: var(--wp-code-300);
+
+  --fill-wp-code-text-100: var(--wp-code-text-100);
+
+  --fill-wp-code-text-alt-100: var(--wp-code-text-alt-100);
+
+  --fill-wp-link-100: var(--wp-link-100);
+  --fill-wp-link-200: var(--wp-link-200);
+
+  --fill-red-50: oklch(0.971 0.013 17.38);
+  --fill-red-100: oklch(0.936 0.032 17.717);
+  --fill-red-200: oklch(0.885 0.062 18.334);
+  --fill-red-300: oklch(0.808 0.114 19.571);
+  --fill-red-400: oklch(0.704 0.191 22.216);
+  --fill-red-500: oklch(0.637 0.237 25.331);
+  --fill-red-600: oklch(0.577 0.245 27.325);
+  --fill-red-700: oklch(0.505 0.213 27.518);
+  --fill-red-800: oklch(0.444 0.177 26.899);
+  --fill-red-900: oklch(0.396 0.141 25.723);
+  --fill-red-950: oklch(0.258 0.092 26.042);
+  --fill-orange-50: oklch(0.98 0.016 73.684);
+  --fill-orange-100: oklch(0.954 0.038 75.164);
+  --fill-orange-200: oklch(0.901 0.076 70.697);
+  --fill-orange-300: oklch(0.837 0.128 66.29);
+  --fill-orange-400: oklch(0.75 0.183 55.934);
+  --fill-orange-500: oklch(0.705 0.213 47.604);
+  --fill-orange-600: oklch(0.646 0.222 41.116);
+  --fill-orange-700: oklch(0.553 0.195 38.402);
+  --fill-orange-800: oklch(0.47 0.157 37.304);
+  --fill-orange-900: oklch(0.408 0.123 38.172);
+  --fill-orange-950: oklch(0.266 0.079 36.259);
+  --fill-amber-50: oklch(0.987 0.022 95.277);
+  --fill-amber-100: oklch(0.962 0.059 95.617);
+  --fill-amber-200: oklch(0.924 0.12 95.746);
+  --fill-amber-300: oklch(0.879 0.169 91.605);
+  --fill-amber-400: oklch(0.828 0.189 84.429);
+  --fill-amber-500: oklch(0.769 0.188 70.08);
+  --fill-amber-600: oklch(0.666 0.179 58.318);
+  --fill-amber-700: oklch(0.555 0.163 48.998);
+  --fill-amber-800: oklch(0.473 0.137 46.201);
+  --fill-amber-900: oklch(0.414 0.112 45.904);
+  --fill-amber-950: oklch(0.279 0.077 45.635);
+  --fill-yellow-50: oklch(0.987 0.026 102.212);
+  --fill-yellow-100: oklch(0.973 0.071 103.193);
+  --fill-yellow-200: oklch(0.945 0.129 101.54);
+  --fill-yellow-300: oklch(0.905 0.182 98.111);
+  --fill-yellow-400: oklch(0.852 0.199 91.936);
+  --fill-yellow-500: oklch(0.795 0.184 86.047);
+  --fill-yellow-600: oklch(0.681 0.162 75.834);
+  --fill-yellow-700: oklch(0.554 0.135 66.442);
+  --fill-yellow-800: oklch(0.476 0.114 61.907);
+  --fill-yellow-900: oklch(0.421 0.095 57.708);
+  --fill-yellow-950: oklch(0.286 0.066 53.813);
+  --fill-lime-50: oklch(0.986 0.031 120.757);
+  --fill-lime-100: oklch(0.967 0.067 122.328);
+  --fill-lime-200: oklch(0.938 0.127 124.321);
+  --fill-lime-300: oklch(0.897 0.196 126.665);
+  --fill-lime-400: oklch(0.841 0.238 128.85);
+  --fill-lime-500: oklch(0.768 0.233 130.85);
+  --fill-lime-600: oklch(0.648 0.2 131.684);
+  --fill-lime-700: oklch(0.532 0.157 131.589);
+  --fill-lime-800: oklch(0.453 0.124 130.933);
+  --fill-lime-900: oklch(0.405 0.101 131.063);
+  --fill-lime-950: oklch(0.274 0.072 132.109);
+  --fill-green-50: oklch(0.982 0.018 155.826);
+  --fill-green-100: oklch(0.962 0.044 156.743);
+  --fill-green-200: oklch(0.925 0.084 155.995);
+  --fill-green-300: oklch(0.871 0.15 154.449);
+  --fill-green-400: oklch(0.792 0.209 151.711);
+  --fill-green-500: oklch(0.723 0.219 149.579);
+  --fill-green-600: oklch(0.627 0.194 149.214);
+  --fill-green-700: oklch(0.527 0.154 150.069);
+  --fill-green-800: oklch(0.448 0.119 151.328);
+  --fill-green-900: oklch(0.393 0.095 152.535);
+  --fill-green-950: oklch(0.266 0.065 152.934);
+  --fill-emerald-50: oklch(0.979 0.021 166.113);
+  --fill-emerald-100: oklch(0.95 0.052 163.051);
+  --fill-emerald-200: oklch(0.905 0.093 164.15);
+  --fill-emerald-300: oklch(0.845 0.143 164.978);
+  --fill-emerald-400: oklch(0.765 0.177 163.223);
+  --fill-emerald-500: oklch(0.696 0.17 162.48);
+  --fill-emerald-600: oklch(0.596 0.145 163.225);
+  --fill-emerald-700: oklch(0.508 0.118 165.612);
+  --fill-emerald-800: oklch(0.432 0.095 166.913);
+  --fill-emerald-900: oklch(0.378 0.077 168.94);
+  --fill-emerald-950: oklch(0.262 0.051 172.552);
+  --fill-teal-50: oklch(0.984 0.014 180.72);
+  --fill-teal-100: oklch(0.953 0.051 180.801);
+  --fill-teal-200: oklch(0.91 0.096 180.426);
+  --fill-teal-300: oklch(0.855 0.138 181.071);
+  --fill-teal-400: oklch(0.777 0.152 181.912);
+  --fill-teal-500: oklch(0.704 0.14 182.503);
+  --fill-teal-600: oklch(0.6 0.118 184.704);
+  --fill-teal-700: oklch(0.511 0.096 186.391);
+  --fill-teal-800: oklch(0.437 0.078 188.216);
+  --fill-teal-900: oklch(0.386 0.063 188.416);
+  --fill-teal-950: oklch(0.277 0.046 192.524);
+  --fill-cyan-50: oklch(0.984 0.019 200.873);
+  --fill-cyan-100: oklch(0.956 0.045 203.388);
+  --fill-cyan-200: oklch(0.917 0.08 205.041);
+  --fill-cyan-300: oklch(0.865 0.127 207.078);
+  --fill-cyan-400: oklch(0.789 0.154 211.53);
+  --fill-cyan-500: oklch(0.715 0.143 215.221);
+  --fill-cyan-600: oklch(0.609 0.126 221.723);
+  --fill-cyan-700: oklch(0.52 0.105 223.128);
+  --fill-cyan-800: oklch(0.45 0.085 224.283);
+  --fill-cyan-900: oklch(0.398 0.07 227.392);
+  --fill-cyan-950: oklch(0.302 0.056 229.695);
+  --fill-sky-50: oklch(0.977 0.013 236.62);
+  --fill-sky-100: oklch(0.951 0.026 236.824);
+  --fill-sky-200: oklch(0.901 0.058 230.902);
+  --fill-sky-300: oklch(0.828 0.111 230.318);
+  --fill-sky-400: oklch(0.746 0.16 232.661);
+  --fill-sky-500: oklch(0.685 0.169 237.323);
+  --fill-sky-600: oklch(0.588 0.158 241.966);
+  --fill-sky-700: oklch(0.5 0.134 242.749);
+  --fill-sky-800: oklch(0.443 0.11 240.79);
+  --fill-sky-900: oklch(0.391 0.09 240.876);
+  --fill-sky-950: oklch(0.293 0.066 243.157);
+  --fill-blue-50: oklch(0.97 0.014 254.604);
+  --fill-blue-100: oklch(0.932 0.032 255.585);
+  --fill-blue-200: oklch(0.882 0.059 254.128);
+  --fill-blue-300: oklch(0.809 0.105 251.813);
+  --fill-blue-400: oklch(0.707 0.165 254.624);
+  --fill-blue-500: oklch(0.623 0.214 259.815);
+  --fill-blue-600: oklch(0.546 0.245 262.881);
+  --fill-blue-700: oklch(0.488 0.243 264.376);
+  --fill-blue-800: oklch(0.424 0.199 265.638);
+  --fill-blue-900: oklch(0.379 0.146 265.522);
+  --fill-blue-950: oklch(0.282 0.091 267.935);
+  --fill-indigo-50: oklch(0.962 0.018 272.314);
+  --fill-indigo-100: oklch(0.93 0.034 272.788);
+  --fill-indigo-200: oklch(0.87 0.065 274.039);
+  --fill-indigo-300: oklch(0.785 0.115 274.713);
+  --fill-indigo-400: oklch(0.673 0.182 276.935);
+  --fill-indigo-500: oklch(0.585 0.233 277.117);
+  --fill-indigo-600: oklch(0.511 0.262 276.966);
+  --fill-indigo-700: oklch(0.457 0.24 277.023);
+  --fill-indigo-800: oklch(0.398 0.195 277.366);
+  --fill-indigo-900: oklch(0.359 0.144 278.697);
+  --fill-indigo-950: oklch(0.257 0.09 281.288);
+  --fill-violet-50: oklch(0.969 0.016 293.756);
+  --fill-violet-100: oklch(0.943 0.029 294.588);
+  --fill-violet-200: oklch(0.894 0.057 293.283);
+  --fill-violet-300: oklch(0.811 0.111 293.571);
+  --fill-violet-400: oklch(0.702 0.183 293.541);
+  --fill-violet-500: oklch(0.606 0.25 292.717);
+  --fill-violet-600: oklch(0.541 0.281 293.009);
+  --fill-violet-700: oklch(0.491 0.27 292.581);
+  --fill-violet-800: oklch(0.432 0.232 292.759);
+  --fill-violet-900: oklch(0.38 0.189 293.745);
+  --fill-violet-950: oklch(0.283 0.141 291.089);
+  --fill-purple-50: oklch(0.977 0.014 308.299);
+  --fill-purple-100: oklch(0.946 0.033 307.174);
+  --fill-purple-200: oklch(0.902 0.063 306.703);
+  --fill-purple-300: oklch(0.827 0.119 306.383);
+  --fill-purple-400: oklch(0.714 0.203 305.504);
+  --fill-purple-500: oklch(0.627 0.265 303.9);
+  --fill-purple-600: oklch(0.558 0.288 302.321);
+  --fill-purple-700: oklch(0.496 0.265 301.924);
+  --fill-purple-800: oklch(0.438 0.218 303.724);
+  --fill-purple-900: oklch(0.381 0.176 304.987);
+  --fill-purple-950: oklch(0.291 0.149 302.717);
+  --fill-fuchsia-50: oklch(0.977 0.017 320.058);
+  --fill-fuchsia-100: oklch(0.952 0.037 318.852);
+  --fill-fuchsia-200: oklch(0.903 0.076 319.62);
+  --fill-fuchsia-300: oklch(0.833 0.145 321.434);
+  --fill-fuchsia-400: oklch(0.74 0.238 322.16);
+  --fill-fuchsia-500: oklch(0.667 0.295 322.15);
+  --fill-fuchsia-600: oklch(0.591 0.293 322.896);
+  --fill-fuchsia-700: oklch(0.518 0.253 323.949);
+  --fill-fuchsia-800: oklch(0.452 0.211 324.591);
+  --fill-fuchsia-900: oklch(0.401 0.17 325.612);
+  --fill-fuchsia-950: oklch(0.293 0.136 325.661);
+  --fill-pink-50: oklch(0.971 0.014 343.198);
+  --fill-pink-100: oklch(0.948 0.028 342.258);
+  --fill-pink-200: oklch(0.899 0.061 343.231);
+  --fill-pink-300: oklch(0.823 0.12 346.018);
+  --fill-pink-400: oklch(0.718 0.202 349.761);
+  --fill-pink-500: oklch(0.656 0.241 354.308);
+  --fill-pink-600: oklch(0.592 0.249 0.584);
+  --fill-pink-700: oklch(0.525 0.223 3.958);
+  --fill-pink-800: oklch(0.459 0.187 3.815);
+  --fill-pink-900: oklch(0.408 0.153 2.432);
+  --fill-pink-950: oklch(0.284 0.109 3.907);
+  --fill-rose-50: oklch(0.969 0.015 12.422);
+  --fill-rose-100: oklch(0.941 0.03 12.58);
+  --fill-rose-200: oklch(0.892 0.058 10.001);
+  --fill-rose-300: oklch(0.81 0.117 11.638);
+  --fill-rose-400: oklch(0.712 0.194 13.428);
+  --fill-rose-500: oklch(0.645 0.246 16.439);
+  --fill-rose-600: oklch(0.586 0.253 17.585);
+  --fill-rose-700: oklch(0.514 0.222 16.935);
+  --fill-rose-800: oklch(0.455 0.188 13.697);
+  --fill-rose-900: oklch(0.41 0.159 10.272);
+  --fill-rose-950: oklch(0.271 0.105 12.094);
+  --fill-slate-50: oklch(0.984 0.003 247.858);
+  --fill-slate-100: oklch(0.968 0.007 247.896);
+  --fill-slate-200: oklch(0.929 0.013 255.508);
+  --fill-slate-300: oklch(0.869 0.022 252.894);
+  --fill-slate-400: oklch(0.704 0.04 256.788);
+  --fill-slate-500: oklch(0.554 0.046 257.417);
+  --fill-slate-600: oklch(0.446 0.043 257.281);
+  --fill-slate-700: oklch(0.372 0.044 257.287);
+  --fill-slate-800: oklch(0.279 0.041 260.031);
+  --fill-slate-900: oklch(0.208 0.042 265.755);
+  --fill-slate-950: oklch(0.129 0.042 264.695);
+  --fill-gray-50: oklch(0.985 0.002 247.839);
+  --fill-gray-100: oklch(0.967 0.003 264.542);
+  --fill-gray-200: oklch(0.928 0.006 264.531);
+  --fill-gray-300: oklch(0.872 0.01 258.338);
+  --fill-gray-400: oklch(0.707 0.022 261.325);
+  --fill-gray-500: oklch(0.551 0.027 264.364);
+  --fill-gray-600: oklch(0.446 0.03 256.802);
+  --fill-gray-700: oklch(0.373 0.034 259.733);
+  --fill-gray-800: oklch(0.278 0.033 256.848);
+  --fill-gray-900: oklch(0.21 0.034 264.665);
+  --fill-gray-950: oklch(0.13 0.028 261.692);
+  --fill-zinc-50: oklch(0.985 0 0);
+  --fill-zinc-100: oklch(0.967 0.001 286.375);
+  --fill-zinc-200: oklch(0.92 0.004 286.32);
+  --fill-zinc-300: oklch(0.871 0.006 286.286);
+  --fill-zinc-400: oklch(0.705 0.015 286.067);
+  --fill-zinc-500: oklch(0.552 0.016 285.938);
+  --fill-zinc-600: oklch(0.442 0.017 285.786);
+  --fill-zinc-700: oklch(0.37 0.013 285.805);
+  --fill-zinc-800: oklch(0.274 0.006 286.033);
+  --fill-zinc-900: oklch(0.21 0.006 285.885);
+  --fill-zinc-950: oklch(0.141 0.005 285.823);
+  --fill-neutral-50: oklch(0.985 0 0);
+  --fill-neutral-100: oklch(0.97 0 0);
+  --fill-neutral-200: oklch(0.922 0 0);
+  --fill-neutral-300: oklch(0.87 0 0);
+  --fill-neutral-400: oklch(0.708 0 0);
+  --fill-neutral-500: oklch(0.556 0 0);
+  --fill-neutral-600: oklch(0.439 0 0);
+  --fill-neutral-700: oklch(0.371 0 0);
+  --fill-neutral-800: oklch(0.269 0 0);
+  --fill-neutral-900: oklch(0.205 0 0);
+  --fill-neutral-950: oklch(0.145 0 0);
+  --fill-stone-50: oklch(0.985 0.001 106.423);
+  --fill-stone-100: oklch(0.97 0.001 106.424);
+  --fill-stone-200: oklch(0.923 0.003 48.717);
+  --fill-stone-300: oklch(0.869 0.005 56.366);
+  --fill-stone-400: oklch(0.709 0.01 56.259);
+  --fill-stone-500: oklch(0.553 0.013 58.071);
+  --fill-stone-600: oklch(0.444 0.011 73.639);
+  --fill-stone-700: oklch(0.374 0.01 67.558);
+  --fill-stone-800: oklch(0.268 0.007 34.298);
+  --fill-stone-900: oklch(0.216 0.006 56.043);
+  --fill-stone-950: oklch(0.147 0.004 49.25);
+  --fill-black: #000;
+  --fill-white: #fff;
+  --fill-int-wp-primary-100: #8ad97f;
+  --fill-int-wp-primary-200: #68c464;
+  --fill-int-wp-primary-300: #4caf50;
+  --fill-int-wp-primary-400: #369943;
+  --fill-int-wp-primary-500: #248438;
+  --fill-int-wp-primary-600: #166e30;
+  --fill-int-wp-secondary-200: #434858;
+  --fill-int-wp-secondary-300: #383c4a;
+  --fill-int-wp-secondary-400: #303440;
+  --fill-int-wp-secondary-500: #2d313d;
+  --fill-int-wp-secondary-600: #2a2e3a;
+  --fill-int-wp-secondary-700: #222631;
+  --fill-int-wp-secondary-800: #1b1f28;
+  --fill-int-wp-control-neutral-100: #fff;
+  --fill-int-wp-control-neutral-200: #d1d5db;
+  --fill-int-wp-control-neutral-300: #9ca3af;
+  --fill-int-wp-control-info-100: #0e7490;
+  --fill-int-wp-control-info-200: #155e75;
+  --fill-int-wp-control-info-300: #164e63;
+  --fill-int-wp-control-info-dark-100: #266778;
+  --fill-int-wp-control-info-dark-200: #2a5360;
+  --fill-int-wp-control-info-dark-300: #284651;
+  --fill-int-wp-control-ok-100: #369943;
+  --fill-int-wp-control-ok-200: #248438;
+  --fill-int-wp-control-ok-300: #166e30;
+  --fill-int-wp-control-ok-dark-100: #408f4b;
+  --fill-int-wp-control-ok-dark-200: #2c7c3d;
+  --fill-int-wp-control-ok-dark-300: #1d6733;
+  --fill-int-wp-error-100: #b91c1c;
+  --fill-int-wp-error-200: #991b1b;
+  --fill-int-wp-error-300: #7f1d1d;
+  --fill-int-wp-state-neutral-100: #4b5563;
+  --fill-int-wp-state-ok-100: #16a34a;
+  --fill-int-wp-state-ok-dark-100: #29904f;
+  --fill-int-wp-state-info-100: #0891b2;
+  --fill-int-wp-state-info-dark-100: #1b869f;
+  --fill-int-wp-state-warn-100: #facc15;
+  --fill-int-wp-state-warn-dark-100: #e2be2d;
+  --fill-int-wp-hint-warn-100: #fef9c3;
+  --fill-int-wp-hint-warn-200: #fde047;
+  --fill-int-wp-hint-warn-dark-100: #c5ba7f;
+  --fill-int-wp-hint-warn-dark-200: #a18e51;
+  --fill-wp-background-100: var(--wp-background-100);
+  --fill-wp-background-200: var(--wp-background-200);
+  --fill-wp-background-300: var(--wp-background-300);
+  --fill-wp-background-400: var(--wp-background-400);
+  --fill-wp-text-100: var(--wp-text-100);
+  --fill-wp-text-200: var(--wp-text-200);
+  --fill-wp-text-alt-100: var(--wp-text-alt-100);
+  --fill-wp-primary-100: var(--wp-primary-100);
+  --fill-wp-primary-200: var(--wp-primary-200);
+  --fill-wp-primary-300: var(--wp-primary-300);
+  --fill-wp-primary-text-100: var(--wp-primary-text-100);
+  --fill-wp-control-neutral-100: var(--wp-control-neutral-100);
+  --fill-wp-control-neutral-200: var(--wp-control-neutral-200);
+  --fill-wp-control-neutral-300: var(--wp-control-neutral-300);
+  --fill-wp-control-info-100: var(--wp-control-info-100);
+  --fill-wp-control-info-200: var(--wp-control-info-200);
+  --fill-wp-control-info-300: var(--wp-control-info-300);
+  --fill-wp-control-ok-100: var(--wp-control-ok-100);
+  --fill-wp-control-ok-200: var(--wp-control-ok-200);
+  --fill-wp-control-ok-300: var(--wp-control-ok-300);
+  --fill-wp-error-100: var(--wp-error-100);
+  --fill-wp-error-200: var(--wp-error-200);
+  --fill-wp-error-300: var(--wp-error-300);
+  --fill-wp-state-neutral-100: var(--wp-state-neutral-100);
+  --fill-wp-state-ok-100: var(--wp-state-ok-100);
+  --fill-wp-state-info-100: var(--wp-state-info-100);
+  --fill-wp-state-warn-100: var(--wp-state-warn-100);
+  --fill-wp-hint-warn-100: var(--wp-hint-warn-100);
+  --fill-wp-hint-warn-200: var(--wp-hint-warn-200);
+  --fill-wp-code-inline-100: var(--wp-code-inline-100);
+  --fill-wp-code-inline-200: var(--wp-code-inline-200);
+  --fill-wp-code-inline-text-100: var(--wp-code-inline-text-100);
+  --fill-wp-code-100: var(--wp-code-100);
+  --fill-wp-code-200: var(--wp-code-200);
+  --fill-wp-code-300: var(--wp-code-300);
+  --fill-wp-code-text-100: var(--wp-code-text-100);
+  --fill-wp-code-text-alt-100: var(--wp-code-text-alt-100);
+  --fill-wp-link-100: var(--wp-link-100);
+  --fill-wp-link-200: var(--wp-link-200);
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
   }
 }
+
+@utility hover-effect {
+  @apply hover:bg-black/20 dark:hover:bg-white/5;
+}
+
+@utility w-fill {
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+}
+
+@utility display-unset {
+  display: unset;
+}
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 5ed933253..575f80ee3 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -7,26 +7,26 @@
         v-if="errorUri"
         :href="errorUri"
         target="_blank"
-        class="mt-1 cursor-pointer text-wp-link-100 hover:text-wp-link-200"
+        class="text-wp-link-100 hover:text-wp-link-200 mt-1 cursor-pointer"
       >
         <span>{{ errorUri }}</span>
       </a>
     </Error>
 
     <div
-      class="flex min-h-sm w-full flex-col overflow-hidden border border-wp-background-400 bg-wp-background-100 shadow dark:bg-wp-background-200 md:m-8 md:w-3xl md:flex-row md:rounded-md"
+      class="min-h-sm border-wp-background-400 bg-wp-background-100 dark:bg-wp-background-200 flex w-full flex-col overflow-hidden border shadow-sm md:m-8 md:w-3xl md:flex-row md:rounded-md"
     >
-      <div class="flex min-h-48 items-center justify-center bg-wp-primary-200 dark:bg-wp-primary-300 md:w-3/5">
+      <div class="bg-wp-primary-200 dark:bg-wp-primary-300 flex min-h-48 items-center justify-center md:w-3/5">
         <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="h-32 w-32 md:h-48 md:w-48" />
       </div>
       <div class="flex min-h-48 flex-col items-center justify-center gap-4 p-4 text-center md:w-2/5">
-        <h1 class="text-xl text-wp-text-100">{{ $t('welcome') }}</h1>
+        <h1 class="text-wp-text-100 text-xl">{{ $t('welcome') }}</h1>
         <div class="flex flex-col gap-2">
           <Button
             v-for="forge in forges"
             :key="forge.id"
             :start-icon="forge.type === 'addon' ? 'repo' : forge.type"
-            class="!whitespace-normal"
+            class="whitespace-normal!"
             @click="doLogin(forge.id)"
           >
             {{ $t('login_with', { forge: getHostFromUrl(forge) }) }}
diff --git a/web/src/views/RepoAdd.vue b/web/src/views/RepoAdd.vue
index 6e59a5985..e48abb5a8 100644
--- a/web/src/views/RepoAdd.vue
+++ b/web/src/views/RepoAdd.vue
@@ -13,7 +13,7 @@
           :to="repo.active ? { name: 'repo', params: { repoId: repo.id } } : undefined"
         >
           <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>
+          <span v-if="repo.active" class="text-wp-text-alt-100 ml-auto">{{ $t('repo.enable.enabled') }}</span>
           <div v-else class="ml-auto flex items-center">
             <Badge v-if="repo.id" class="md:display-unset mr-2 hidden" :label="$t('repo.enable.disabled')" />
             <Button
@@ -24,7 +24,7 @@
           </div>
         </ListItem>
       </template>
-      <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+      <div v-else-if="loading" class="text-wp-text-100 flex justify-center">
         <Icon name="spinner" />
       </div>
     </div>
diff --git a/web/src/views/Repos.vue b/web/src/views/Repos.vue
index 749e8d1cd..ec78c49b9 100644
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@@ -18,7 +18,7 @@
         </div>
 
         <div class="flex flex-col gap-4">
-          <h2 class="text-lg text-wp-text-100">{{ $t('all_repositories') }}</h2>
+          <h2 class="text-wp-text-100 text-lg">{{ $t('all_repositories') }}</h2>
           <div class="flex flex-col gap-4">
             <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
           </div>
@@ -28,7 +28,7 @@
         <div v-if="reposLastActivity.length > 0" class="flex flex-col gap-4">
           <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
         </div>
-        <span v-else class="text-center text-lg text-wp-text-100">{{ $t('no_search_results') }}</span>
+        <span v-else class="text-wp-text-100 text-center text-lg">{{ $t('no_search_results') }}</span>
       </div>
     </Transition>
   </Scaffold>
diff --git a/web/src/views/admin/AdminInfo.vue b/web/src/views/admin/AdminInfo.vue
index 896ee5c17..e4c2d2fe1 100644
--- a/web/src/views/admin/AdminInfo.vue
+++ b/web/src/views/admin/AdminInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <Settings :title="$t('info')">
     <div class="flex flex-col items-center gap-4">
-      <WoodpeckerLogo class="h-32 w-32 fill-wp-text-200" />
+      <WoodpeckerLogo class="fill-wp-text-200 h-32 w-32" />
 
       <i18n-t keypath="running_version" tag="p" class="text-center text-xl">
         <span class="font-bold">{{ version?.current }}</span>
diff --git a/web/src/views/admin/AdminOrgs.vue b/web/src/views/admin/AdminOrgs.vue
index 14eee8d95..063244b61 100644
--- a/web/src/views/admin/AdminOrgs.vue
+++ b/web/src/views/admin/AdminOrgs.vue
@@ -1,10 +1,10 @@
 <template>
   <Settings :title="$t('admin.settings.orgs.orgs')" :description="$t('admin.settings.orgs.desc')">
-    <div class="space-y-4 text-wp-text-100">
+    <div class="text-wp-text-100 space-y-4">
       <ListItem
         v-for="org in orgs"
         :key="org.id"
-        class="items-center gap-2 !bg-wp-background-200 dark:!bg-wp-background-100"
+        class="bg-wp-background-200! dark:bg-wp-background-100! items-center gap-2"
       >
         <span>{{ org.name }}</span>
         <IconButton
@@ -22,7 +22,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.orgs.delete_org')"
-          class="ml-2 h-8 w-8 hover:text-wp-error-100"
+          class="hover:text-wp-error-100 ml-2 h-8 w-8"
           :is-loading="isDeleting"
           @click="deleteOrg(org)"
         />
diff --git a/web/src/views/admin/AdminQueue.vue b/web/src/views/admin/AdminQueue.vue
index 07d7c6661..3a03bc7ed 100644
--- a/web/src/views/admin/AdminQueue.vue
+++ b/web/src/views/admin/AdminQueue.vue
@@ -26,11 +26,11 @@
       <AdminQueueStats :stats="queueInfo?.stats" />
 
       <div v-if="tasks.length > 0" class="flex flex-col">
-        <p class="mb-2 mt-6 text-xl">{{ $t('admin.settings.queue.tasks') }}</p>
+        <p class="mt-6 mb-2 text-xl">{{ $t('admin.settings.queue.tasks') }}</p>
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="mb-2 items-center !bg-wp-background-200 dark:!bg-wp-background-100"
+          class="bg-wp-background-200! dark:bg-wp-background-100! mb-2 items-center"
         >
           <div
             class="flex items-center"
diff --git a/web/src/views/admin/AdminRepos.vue b/web/src/views/admin/AdminRepos.vue
index 6c6ba287a..b435b6ad2 100644
--- a/web/src/views/admin/AdminRepos.vue
+++ b/web/src/views/admin/AdminRepos.vue
@@ -9,11 +9,11 @@
       />
     </template>
 
-    <div class="space-y-4 text-wp-text-100">
+    <div class="text-wp-text-100 space-y-4">
       <ListItem
         v-for="repo in repos"
         :key="repo.id"
-        class="items-center gap-2 bg-wp-background-200 dark:!bg-wp-background-100"
+        class="bg-wp-background-200 dark:bg-wp-background-100! items-center gap-2"
       >
         <span>{{ repo.full_name }}</span>
         <div class="ml-auto flex items-center">
diff --git a/web/src/views/admin/AdminUsers.vue b/web/src/views/admin/AdminUsers.vue
index 1f872a939..2f2b53797 100644
--- a/web/src/views/admin/AdminUsers.vue
+++ b/web/src/views/admin/AdminUsers.vue
@@ -10,11 +10,11 @@
       <Button v-else :text="$t('admin.settings.users.add')" start-icon="plus" @click="showAddUser" />
     </template>
 
-    <div v-if="!selectedUser" class="space-y-4 text-wp-text-100">
+    <div v-if="!selectedUser" class="text-wp-text-100 space-y-4">
       <ListItem
         v-for="user in users"
         :key="user.id"
-        class="items-center gap-2 !bg-wp-background-200 dark:!bg-wp-background-100"
+        class="bg-wp-background-200! dark:bg-wp-background-100! items-center gap-2"
       >
         <img v-if="user.avatar_url" class="h-6 rounded-md" :src="user.avatar_url" />
         <span>{{ user.login }}</span>
@@ -33,7 +33,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.users.delete_user')"
-          class="ml-2 h-8 w-8 hover:text-wp-error-100"
+          class="hover:text-wp-error-100 ml-2 h-8 w-8"
           :is-loading="isDeleting"
           @click="deleteUser(user)"
         />
diff --git a/web/src/views/cli/Auth.vue b/web/src/views/cli/Auth.vue
index 3590aa2aa..a0d1e1838 100644
--- a/web/src/views/cli/Auth.vue
+++ b/web/src/views/cli/Auth.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="m-auto flex flex-col gap-4">
-    <div class="text-center text-wp-text-100">
+    <div class="text-wp-text-100 text-center">
       <WoodpeckerLogo preserveAspectRatio="xMinYMin slice" class="m-auto mb-8 w-32" />
       <template v-if="state === 'confirm'">
         <h1 class="text-4xl font-bold">{{ $t('login_to_cli') }}</h1>
diff --git a/web/src/views/org/OrgRepos.vue b/web/src/views/org/OrgRepos.vue
index b4ef7af65..0a27976fd 100644
--- a/web/src/views/org/OrgRepos.vue
+++ b/web/src/views/org/OrgRepos.vue
@@ -17,7 +17,7 @@
       <RepoItem v-for="repo in reposLastActivity" :key="repo.id" :repo="repo" />
     </div>
     <div v-if="(reposLastActivity || []).length <= 0" class="text-center">
-      <span class="m-auto text-wp-text-100">{{ $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 2416f05f4..b078a0e6f 100644
--- a/web/src/views/repo/RepoBranch.vue
+++ b/web/src/views/repo/RepoBranch.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 flex w-full justify-center">
-    <span class="text-xl text-wp-text-100">{{ $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 e3e087614..704892630 100644
--- a/web/src/views/repo/RepoBranches.vue
+++ b/web/src/views/repo/RepoBranches.vue
@@ -11,7 +11,7 @@
         <Badge v-if="branch === repo?.default_branch" :label="$t('default')" class="ml-auto" />
       </ListItem>
     </template>
-    <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+    <div v-else-if="loading" class="text-wp-text-100 flex justify-center">
       <Icon name="spinner" />
     </div>
     <Panel v-else class="flex justify-center">
diff --git a/web/src/views/repo/RepoManualPipeline.vue b/web/src/views/repo/RepoManualPipeline.vue
index 64e314d8e..ec0ab21a1 100644
--- a/web/src/views/repo/RepoManualPipeline.vue
+++ b/web/src/views/repo/RepoManualPipeline.vue
@@ -1,12 +1,12 @@
 <template>
   <Panel v-if="!loading">
     <form @submit.prevent="triggerManualPipeline">
-      <span class="text-xl text-wp-text-100">{{ $t('repo.manual_pipeline.title') }}</span>
+      <span class="text-wp-text-100 text-xl">{{ $t('repo.manual_pipeline.title') }}</span>
       <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.select_branch')">
         <SelectField :id="id" v-model="payload.branch" :options="branches" required />
       </InputField>
       <InputField v-slot="{ id }" :label="$t('repo.manual_pipeline.variables.title')">
-        <span class="mb-2 text-sm text-wp-text-alt-100">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
+        <span class="text-wp-text-alt-100 mb-2 text-sm">{{ $t('repo.manual_pipeline.variables.desc') }}</span>
         <KeyValueEditor
           :id="id"
           v-model="payload.variables"
@@ -19,7 +19,7 @@
       <Button type="submit" :text="$t('repo.manual_pipeline.trigger')" :disabled="!isFormValid" />
     </form>
   </Panel>
-  <div v-else class="flex justify-center text-wp-text-100">
+  <div v-else class="text-wp-text-100 flex justify-center">
     <Icon name="spinner" />
   </div>
 </template>
diff --git a/web/src/views/repo/RepoPullRequest.vue b/web/src/views/repo/RepoPullRequest.vue
index 944f4b3c4..a11fed41b 100644
--- a/web/src/views/repo/RepoPullRequest.vue
+++ b/web/src/views/repo/RepoPullRequest.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mb-4 flex w-full justify-center">
-    <span class="text-xl text-wp-text-100">{{ $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 d96795c9d..cb2865689 100644
--- a/web/src/views/repo/RepoPullRequests.vue
+++ b/web/src/views/repo/RepoPullRequests.vue
@@ -8,15 +8,15 @@
         :to="{ name: 'repo-pull-request', params: { pullRequest: pullRequest.index } }"
       >
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <span class="md:display-unset hidden text-wp-text-alt-100">#{{ pullRequest.index }}</span>
+        <span class="md:display-unset text-wp-text-alt-100 hidden">#{{ pullRequest.index }}</span>
         <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
-        <span class="md:display-unset mx-2 hidden text-wp-text-alt-100">-</span>
-        <span class="overflow-hidden overflow-ellipsis whitespace-nowrap text-wp-text-100 underline md:no-underline">{{
+        <span class="md:display-unset text-wp-text-alt-100 mx-2 hidden">-</span>
+        <span class="text-wp-text-100 overflow-hidden text-ellipsis whitespace-nowrap underline md:no-underline">{{
           pullRequest.title
         }}</span>
       </ListItem>
     </template>
-    <div v-else-if="loading" class="flex justify-center text-wp-text-100">
+    <div v-else-if="loading" class="text-wp-text-100 flex justify-center">
       <Icon name="spinner" />
     </div>
     <Panel v-else class="flex justify-center">
diff --git a/web/src/views/repo/pipeline/Pipeline.vue b/web/src/views/repo/pipeline/Pipeline.vue
index a22d71822..b599ad0c7 100644
--- a/web/src/views/repo/pipeline/Pipeline.vue
+++ b/web/src/views/repo/pipeline/Pipeline.vue
@@ -1,17 +1,17 @@
 <template>
-  <Container full-width class="md:min-h-xs flex flex-grow-0 flex-col md:flex-grow md:px-4">
-    <div class="flex min-h-0 w-full flex-grow flex-wrap-reverse md:flex-nowrap md:gap-4">
+  <Container full-width class="md:min-h-xs flex grow-0 flex-col md:grow md:px-4">
+    <div class="flex min-h-0 w-full grow flex-wrap-reverse md:flex-nowrap md:gap-4">
       <PipelineStepList
         v-model:selected-step-id="selectedStepId"
         :class="{ 'hidden md:flex': pipeline!.status === 'blocked' }"
         :pipeline="pipeline!"
       />
 
-      <div class="relative flex flex-grow basis-full items-start justify-center md:basis-auto">
+      <div class="relative flex grow basis-full items-start justify-center md:basis-auto">
         <div v-if="pipeline!.errors?.some((e) => !e.is_warning)" class="mb-4 w-full md:mb-auto">
           <Panel>
             <div class="flex flex-col items-center gap-4 text-center">
-              <Icon name="status-error" class="h-16 w-16 text-wp-error-100" size="1.5rem" />
+              <Icon name="status-error" class="text-wp-error-100 h-16 w-16" size="1.5rem" />
               <span class="text-xl">{{ $t('repo.pipeline.we_got_some_errors') }}</span>
               <Button color="red" :text="$t('repo.pipeline.show_errors')" :to="{ name: 'repo-pipeline-errors' }" />
             </div>
@@ -44,7 +44,7 @@
         <div v-else-if="pipeline!.status === 'declined'" class="mb-4 w-full md:mb-auto">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-declined" size="1.5rem" class="h-16 w-16 text-wp-error-100" />
+              <Icon name="status-declined" size="1.5rem" class="text-wp-error-100 h-16 w-16" />
               <p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
             </div>
           </Panel>
@@ -54,7 +54,7 @@
           v-else-if="selectedStepId !== null"
           v-model:step-id="selectedStepId"
           :pipeline="pipeline!"
-          class="fixed left-0 top-0 h-full w-full md:absolute"
+          class="fixed top-0 left-0 h-full w-full md:absolute"
         />
       </div>
     </div>
diff --git a/web/src/views/repo/pipeline/PipelineConfig.vue b/web/src/views/repo/pipeline/PipelineConfig.vue
index 5880c8298..1daed896b 100644
--- a/web/src/views/repo/pipeline/PipelineConfig.vue
+++ b/web/src/views/repo/pipeline/PipelineConfig.vue
@@ -7,7 +7,7 @@
       collapsed-by-default
       :title="pipelineConfigsDecoded && pipelineConfigsDecoded.length > 1 ? pipelineConfig.name : ''"
     >
-      <SyntaxHighlight class="overflow-auto whitespace-pre font-mono" language="yaml" :code="pipelineConfig.data" />
+      <SyntaxHighlight class="overflow-auto font-mono whitespace-pre" language="yaml" :code="pipelineConfig.data" />
     </Panel>
   </div>
 </template>
diff --git a/web/src/views/repo/pipeline/PipelineDebug.vue b/web/src/views/repo/pipeline/PipelineDebug.vue
index dfc873631..47ef06202 100644
--- a/web/src/views/repo/pipeline/PipelineDebug.vue
+++ b/web/src/views/repo/pipeline/PipelineDebug.vue
@@ -2,7 +2,7 @@
   <template v-if="repoPermissions && repoPermissions.push">
     <Panel>
       <InputField :label="$t('repo.pipeline.debug.metadata_exec_title')">
-        <p class="mb-2 text-sm text-wp-text-alt-100">{{ $t('repo.pipeline.debug.metadata_exec_desc') }}</p>
+        <p class="text-wp-text-alt-100 mb-2 text-sm">{{ $t('repo.pipeline.debug.metadata_exec_desc') }}</p>
         <pre class="code-box">{{ cliExecWithMetadata }}</pre>
       </InputField>
       <div class="flex items-center space-x-4">
@@ -11,7 +11,7 @@
     </Panel>
   </template>
   <div v-else class="flex h-full items-center justify-center">
-    <div class="rounded-lg bg-wp-error-100 p-8 text-center shadow-lg dark:bg-wp-error-200">
+    <div class="bg-wp-error-100 dark:bg-wp-error-200 rounded-lg p-8 text-center shadow-lg">
       <p class="text-2xl font-bold text-white">{{ $t('repo.pipeline.debug.no_permission') }}</p>
     </div>
   </div>
diff --git a/web/src/views/repo/pipeline/PipelineErrors.vue b/web/src/views/repo/pipeline/PipelineErrors.vue
index 9ac8f41f3..9f9cc9b04 100644
--- a/web/src/views/repo/pipeline/PipelineErrors.vue
+++ b/web/src/views/repo/pipeline/PipelineErrors.vue
@@ -3,11 +3,11 @@
     <div class="flex flex-col gap-y-4">
       <template v-for="(error, _index) in pipeline!.errors" :key="_index">
         <div>
-          <div class="grid grid-cols-[minmax(10rem,auto),3fr]">
+          <div class="grid grid-cols-[minmax(10rem,auto)_3fr]">
             <span class="flex items-center gap-x-2">
               <Icon
                 name="alert"
-                class="my-1 flex-shrink-0"
+                class="my-1 shrink-0"
                 :class="{
                   'text-wp-state-warn-100': error.is_warning,
                   'text-wp-error-100': !error.is_warning,
@@ -35,7 +35,7 @@
             </span>
             <span v-else />
           </div>
-          <div class="col-start-2 grid grid-cols-[minmax(10rem,auto),4fr]">
+          <div class="col-start-2 grid grid-cols-[minmax(10rem,auto)_4fr]">
             <span />
             <span>
               <RenderMarkdown :content="error.message" />
diff --git a/web/src/views/repo/pipeline/PipelineWrapper.vue b/web/src/views/repo/pipeline/PipelineWrapper.vue
index 7c7928be0..7ea8c75b9 100644
--- a/web/src/views/repo/pipeline/PipelineWrapper.vue
+++ b/web/src/views/repo/pipeline/PipelineWrapper.vue
@@ -20,11 +20,11 @@
     <template #headerActions>
       <div class="flex w-full items-center justify-between gap-2">
         <div class="flex min-w-0 content-start gap-2">
-          <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
-          <span class="flex-shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
+          <PipelineStatusIcon :status="pipeline.status" class="flex shrink-0" />
+          <span class="shrink-0 text-center">{{ $t('repo.pipeline.pipeline', { pipelineId }) }}</span>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
           <span class="hidden md:inline-block">-</span>
-          <span class="min-w-0 overflow-hidden overflow-ellipsis whitespace-nowrap" :title="message">{{
+          <span class="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap" :title="message">{{
             shortMessage
           }}</span>
         </div>
@@ -33,20 +33,20 @@
           <div class="flex content-start gap-x-2">
             <Button
               v-if="pipeline.status === 'pending' || pipeline.status === 'running'"
-              class="flex-shrink-0"
+              class="shrink-0"
               :text="$t('repo.pipeline.actions.cancel')"
               :is-loading="isCancelingPipeline"
               @click="cancelPipeline"
             />
             <Button
-              class="flex-shrink-0"
+              class="shrink-0"
               :text="$t('repo.pipeline.actions.restart')"
               :is-loading="isRestartingPipeline"
               @click="restartPipeline"
             />
             <Button
               v-if="pipeline.status === 'success' && repo.allow_deploy"
-              class="flex-shrink-0"
+              class="shrink-0"
               :text="$t('repo.pipeline.actions.deploy')"
               @click="showDeployPipelinePopup = true"
             />
@@ -62,11 +62,11 @@
 
     <template #tabActions>
       <div class="flex flex-wrap gap-4 md:flex-nowrap">
-        <div class="flex flex-shrink-0 items-center gap-2" :title="$t('repo.pipeline.created', { created })">
+        <div class="flex shrink-0 items-center gap-2" :title="$t('repo.pipeline.created', { created })">
           <Icon name="since" />
           <span>{{ since }}</span>
         </div>
-        <div class="flex flex-shrink-0 items-center gap-2" :title="$t('repo.pipeline.duration')">
+        <div class="flex shrink-0 items-center gap-2" :title="$t('repo.pipeline.duration')">
           <Icon name="duration" />
           <span>{{ duration }}</span>
         </div>
diff --git a/web/src/views/repo/settings/Crons.vue b/web/src/views/repo/settings/Crons.vue
index 80f6b2e5d..281c4e98f 100644
--- a/web/src/views/repo/settings/Crons.vue
+++ b/web/src/views/repo/settings/Crons.vue
@@ -14,11 +14,11 @@
       <Button v-else start-icon="plus" :text="$t('repo.settings.crons.add')" @click="selectedCron = {}" />
     </template>
 
-    <div v-if="!selectedCron" class="space-y-4 text-wp-text-100">
+    <div v-if="!selectedCron" class="text-wp-text-100 space-y-4">
       <ListItem
         v-for="cron in crons"
         :key="cron.id"
-        class="items-center !bg-wp-background-200 dark:!bg-wp-background-100"
+        class="bg-wp-background-200! dark:bg-wp-background-100! items-center"
       >
         <span class="grid w-full grid-cols-3">
           <span>{{ cron.name }}</span>
@@ -39,7 +39,7 @@
         <IconButton icon="edit" class="h-8 w-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
         <IconButton
           icon="trash"
-          class="h-8 w-8 hover:text-wp-error-100"
+          class="hover:text-wp-error-100 h-8 w-8"
           :is-loading="isDeleting"
           :title="$t('repo.settings.crons.delete')"
           @click="deleteCron(cron)"
diff --git a/web/src/views/repo/settings/General.vue b/web/src/views/repo/settings/General.vue
index b42a8f040..c57674035 100644
--- a/web/src/views/repo/settings/General.vue
+++ b/web/src/views/repo/settings/General.vue
@@ -120,7 +120,7 @@
       >
         <div class="flex items-center">
           <NumberField :id="id" v-model="repoSettings.timeout" class="w-24" />
-          <span class="ml-4 text-wp-text-alt-100">{{ $t('repo.settings.general.timeout.minutes') }}</span>
+          <span class="text-wp-text-alt-100 ml-4">{{ $t('repo.settings.general.timeout.minutes') }}</span>
         </div>
       </InputField>
 
diff --git a/web/src/views/user/UserCLIAndAPI.vue b/web/src/views/user/UserCLIAndAPI.vue
index dbf550a4b..74910219c 100644
--- a/web/src/views/user/UserCLIAndAPI.vue
+++ b/web/src/views/user/UserCLIAndAPI.vue
@@ -2,7 +2,7 @@
   <Settings :title="$t('user.settings.cli_and_api.cli_and_api')" :description="$t('user.settings.cli_and_api.desc')">
     <InputField :label="$t('user.settings.cli_and_api.cli_usage')">
       <template #headerActions>
-        <a :href="cliDownload" target="_blank" class="ml-4 text-wp-link-100 hover:text-wp-link-200">{{
+        <a :href="cliDownload" target="_blank" class="text-wp-link-100 hover:text-wp-link-200 ml-4">{{
           $t('user.settings.cli_and_api.download_cli')
         }}</a>
       </template>
@@ -22,7 +22,7 @@
           v-if="enableSwagger"
           :href="`${address}/swagger/index.html`"
           target="_blank"
-          class="ml-4 text-wp-link-100 hover:text-wp-link-200"
+          class="text-wp-link-100 hover:text-wp-link-200 ml-4"
         >
           {{ $t('user.settings.cli_and_api.swagger_ui') }}
         </a>
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
deleted file mode 100644
index a6a115bc7..000000000
--- a/web/tailwind.config.ts
+++ /dev/null
@@ -1,237 +0,0 @@
-// cSpell:ignore Segoe Roboto Neue Noto nocheck
-// eslint-disable-next-line ts/ban-ts-comment
-// @ts-nocheck
-
-import typography from '@tailwindcss/typography';
-import type { Config } from 'tailwindcss';
-import colors from 'tailwindcss/colors';
-import tinycolor from 'tinycolor2';
-
-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 {
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}', './src/**/*.css'],
-  darkMode: 'class',
-  theme: {
-    extend: {
-      colors: {
-        // 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-error': {
-          100: colors.red[700],
-          200: colors.red[800],
-          300: colors.red[900],
-        },
-        '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-error': {
-          100: 'var(--wp-error-100)',
-          200: 'var(--wp-error-200)',
-          300: 'var(--wp-error-300)',
-        },
-
-        '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-inline': {
-          100: 'var(--wp-code-inline-100)',
-          200: 'var(--wp-code-inline-200)',
-        },
-
-        'wp-code-inline-text': {
-          100: 'var(--wp-code-inline-text-100)',
-        },
-
-        'wp-code': {
-          100: 'var(--wp-code-100)',
-          200: 'var(--wp-code-200)',
-          300: 'var(--wp-code-300)',
-        },
-
-        'wp-code-text': {
-          100: 'var(--wp-code-text-100)',
-        },
-        'wp-code-text-alt': {
-          100: 'var(--wp-code-text-alt-100)',
-        },
-
-        'wp-link': {
-          100: 'var(--wp-link-100)',
-          200: 'var(--wp-link-200)',
-        },
-      },
-      spacing: {
-        sm: '24rem',
-        md: '28rem',
-        lg: '32rem',
-        xl: '36rem',
-        '2xl': '42rem',
-        '3xl': '48rem',
-      },
-      fontFamily: {
-        sans: [
-          'system-ui',
-          '-apple-system',
-          'Segoe UI',
-          'Roboto',
-          'Helvetica Neue',
-          'Noto Sans',
-          'Liberation Sans',
-          'Arial',
-          'sans-serif',
-        ],
-      },
-      transitionProperty: {
-        height: 'max-height',
-      },
-
-      stroke: (theme: (path: string) => object) => theme('colors'),
-      fill: (theme: (path: string) => object) => theme('colors'),
-    },
-  },
-  plugins: [typography],
-} satisfies Config;
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 5629d748b..41ba719e3 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -27,14 +27,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "src/**/*.json",
-    "tailwind.config.ts",
-    "vite.config.ts",
-    "postcss.config.js"
-  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.json", "vite.config.ts"],
   "exclude": ["node_modules", "**/__tests__/**/*", "**/dist/**/*"]
 }
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 07267a75d..13e1303e4 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -2,6 +2,7 @@ import { readdirSync } from 'node:fs';
 import path from 'node:path';
 import process from 'node:process';
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';
+import tailwindcss from '@tailwindcss/vite';
 import vue from '@vitejs/plugin-vue';
 import type { Plugin } from 'vite';
 import prismjs from 'vite-plugin-prismjs';
@@ -75,6 +76,7 @@ export default defineConfig({
     prismjs({
       languages: ['yaml'],
     }),
+    tailwindcss(),
   ],
   resolve: {
     alias: {