Merge branch 'origin/main' into 'next-release/main'

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

@@ -1,22 +1,22 @@
 <template>
   <div v-if="stats" class="flex justify-center">
     <div
-      class="bg-wp-background-200 border border-wp-background-300 dark:bg-wp-background-100 text-wp-text-100 rounded-md py-5 px-5 w-full"
+      class="border-wp-background-300 bg-wp-background-200 dark:bg-wp-background-100 px-5 py-5 border rounded-md w-full text-wp-text-100"
     >
       <div class="flex w-full">
-        <h3 class="text-lg font-semibold leading-tight uppercase flex-1">
+        <h3 class="flex-1 font-semibold text-lg uppercase leading-tight">
           {{ $t('admin.settings.queue.stats.completed_count') }}
         </h3>
       </div>
-      <div class="relative overflow-hidden transition-all duration-500">
+      <div class="relative transition-all duration-500 overflow-hidden">
         <div>
           <div class="pb-4 lg:pb-6">
-            <h4 class="text-2xl lg:text-3xl font-semibold leading-tight inline-block">
+            <h4 class="inline-block font-semibold text-2xl lg:text-3xl leading-tight">
               {{ stats.completed_count }}
             </h4>
           </div>
           <div v-if="total > 0" class="pb-4 lg:pb-6">
-            <div class="overflow-hidden rounded-full h-3 flex transition-all duration-500">
+            <div class="flex rounded-full h-3 transition-all duration-500 overflow-hidden">
               <div
                 v-for="item in data"
                 :key="item.key"
@@ -28,15 +28,15 @@
               </div>
             </div>
           </div>
-          <div class="flex -mx-4 sm:flex-wrap">
+          <div class="flex sm:flex-wrap -mx-4">
             <div
               v-for="(item, index) in data"
               :key="item.key"
-              class="px-4 md:w-1/4 sm:w-full"
+              class="px-4 sm:w-full md:w-1/4"
               :class="{ 'md:border-l border-gray-300 dark:border-gray-600': index !== 0 }"
             >
-              <div class="text-sm whitespace-nowrap overflow-hidden text-ellipsis">
-                <span class="inline-block w-2 h-2 rounded-full mr-1 align-middle" :class="`${item.color}`">&nbsp;</span>
+              <div class="text-ellipsis text-sm whitespace-nowrap overflow-hidden">
+                <span class="inline-block mr-1 rounded-full w-2 h-2 align-middle" :class="`${item.color}`">&nbsp;</span>
                 <span class="align-middle">{{ item.label }}</span>
               </div>
               <div class="font-medium text-lg">
@@ -104,7 +104,7 @@ const data = computed(() => {
       label: t('admin.settings.queue.stats.waiting_on_deps_count'),
       value: props.stats.waiting_on_deps_count,
       percentage: total.value > 0 ? (props.stats.waiting_on_deps_count / total.value) * 100 : 0,
-      color: 'bg-wp-state-error-100',
+      color: 'bg-wp-error-100 dark:bg-wp-error-200',
     },
   ];
 });

web/src/components/agent/AgentList.vue

@@ -7,7 +7,7 @@
     >
       <span>{{ agent.name || `Agent ${agent.id}` }}</span>
       <span class="ml-auto">
-        <span class="hidden md:inline-block space-x-2">
+        <span class="md:inline-block space-x-2 hidden">
           <Badge
             v-if="props.isAdmin === true && agent.org_id !== -1"
             :label="$t('admin.settings.agents.org.badge')"
@@ -30,7 +30,7 @@
       <IconButton
         icon="trash"
         :title="$t('admin.settings.agents.delete_agent')"
-        class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+        class="ml-2 w-8 h-8 hover:text-wp-error-100"
         :is-loading="props.isDeleting"
         @click="$emit('delete', agent)"
       />

web/src/components/atomic/Button.vue

@@ -2,13 +2,13 @@
   <component
     :is="to === undefined ? 'button' : httpLink ? 'a' : 'router-link'"
     v-bind="btnAttrs"
-    class="relative flex flex-shrink-0 whitespace-nowrap items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
+    class="relative flex flex-shrink-0 items-center disabled:opacity-50 shadow-sm px-2 py-1 border rounded-md whitespace-nowrap transition-all duration-150 cursor-pointer disabled:cursor-not-allowed overflow-hidden"
     :class="{
       'bg-wp-control-neutral-100 hover:bg-wp-control-neutral-200 border-wp-control-neutral-300 text-wp-text-100':
         color === 'gray',
       'bg-wp-control-ok-100 hover:bg-wp-control-ok-200 border-wp-control-ok-300 text-white': color === 'green',
       'bg-wp-control-info-100 hover:bg-wp-control-info-200 border-wp-control-info-300 text-white': color === 'blue',
-      'bg-wp-control-error-100 hover:bg-wp-control-error-200 border-wp-control-error-300 text-white': color === 'red',
+      'bg-wp-error-100 dark:bg-wp-error-200 hover:bg-wp-error-300 border-wp-error-300 text-white': color === 'red',
       ...passedClasses,
     }"
     :title="title"
@@ -20,12 +20,12 @@
       <Icon v-if="endIcon" :name="endIcon" class="ml-2 w-6 h-6" :class="{ invisible: isLoading }" />
       <div
         v-if="isLoading"
-        class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center"
+        class="top-0 right-0 bottom-0 left-0 absolute flex justify-center items-center"
         :class="{
           'bg-wp-control-neutral-200': color === 'gray',
           'bg-wp-control-ok-200': color === 'green',
           'bg-wp-control-info-200': color === 'blue',
-          'bg-wp-control-error-200': color === 'red',
+          'bg-wp-error-200': color === 'red',
         }"
       >
         <Icon name="spinner" />

web/src/components/atomic/Error.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex gap-2 items-center bg-wp-control-error-100 border-l-6 border border-solid border-wp-control-error-300 text-white p-2 rounded-md"
+    class="flex items-center gap-2 border-wp-error-300 dark:border-wp-error-300 bg-wp-error-100 dark:bg-wp-error-200 p-2 border border-l-6 border-solid rounded-md text-white"
   >
     <Icon v-if="!textOnly" name="error" />
     <slot>

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

@@ -26,10 +26,7 @@
         :to="{ name: 'admin-settings' }"
       >
         <Icon name="settings" />
-        <div
-          v-if="version?.needsUpdate"
-          class="top-2 right-2 absolute bg-int-wp-state-error-100 rounded-full w-3 h-3"
-        />
+        <div v-if="version?.needsUpdate" class="top-2 right-2 absolute bg-int-wp-error-100 rounded-full w-3 h-3" />
       </IconButton>
 
       <ActivePipelines v-if="user" class="!p-1.5 navbar-icon" />

web/src/components/registry/RegistryList.vue

@@ -15,7 +15,7 @@
       <IconButton
         v-if="!registry.readonly"
         icon="trash"
-        class="w-8 h-8 hover:text-wp-control-error-100"
+        class="w-8 h-8 hover:text-wp-error-100"
         :is-loading="isDeleting"
         :title="$t('registries.delete')"
         @click="deleteRegistry(registry)"

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

@@ -5,7 +5,7 @@
         class="w-3 h-full"
         :class="{
           'bg-wp-state-warn-100': pipeline.status === 'pending',
-          'bg-wp-state-error-100': pipelineStatusColors[pipeline.status] === 'red',
+          'bg-wp-error-100 dark:bg-wp-error-200': pipelineStatusColors[pipeline.status] === 'red',
           'bg-wp-state-neutral-100': pipelineStatusColors[pipeline.status] === 'gray',
           'bg-wp-state-ok-100': pipelineStatusColors[pipeline.status] === 'green',
           'bg-wp-state-info-100': pipelineStatusColors[pipeline.status] === 'blue',

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

@@ -7,7 +7,7 @@
       :name="service ? 'settings' : `status-${status}`"
       size="1.5rem"
       :class="{
-        'text-wp-state-error-100': pipelineStatusColors[status] === 'red',
+        'text-wp-error-100': pipelineStatusColors[status] === 'red',
         'text-wp-state-neutral-100': pipelineStatusColors[status] === 'gray',
         'text-wp-state-ok-100': pipelineStatusColors[status] === 'green',
         'text-wp-state-info-100': pipelineStatusColors[status] === 'blue',

web/src/components/secrets/SecretList.vue

@@ -23,7 +23,7 @@
         />
         <IconButton
           icon="trash"
-          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+          class="ml-2 w-8 h-8 hover:text-wp-error-100"
           :is-loading="isDeleting"
           :title="$t('secrets.delete')"
           @click="deleteSecret(secret)"

web/src/style.css

@@ -26,11 +26,10 @@
   --wp-control-ok-200: theme('colors.int-wp-control-ok.200');
   --wp-control-ok-300: theme('colors.int-wp-control-ok.300');
 
-  --wp-control-error-100: theme('colors.int-wp-control-error.100');
-  --wp-control-error-200: theme('colors.int-wp-control-error.200');
-  --wp-control-error-300: theme('colors.int-wp-control-error.300');
+  --wp-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-state-error-100: theme('colors.int-wp-state-error.100');
   --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
   --wp-state-ok-100: theme('colors.int-wp-state-ok.100');
   --wp-state-info-100: theme('colors.int-wp-state-info.100');
@@ -75,11 +74,10 @@
   --wp-control-ok-200: theme('colors.int-wp-control-ok-dark.200');
   --wp-control-ok-300: theme('colors.int-wp-control-ok-dark.300');
 
-  --wp-control-error-100: theme('colors.int-wp-control-error-dark.100');
-  --wp-control-error-200: theme('colors.int-wp-control-error-dark.200');
-  --wp-control-error-300: theme('colors.int-wp-control-error-dark.300');
+  --wp-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-state-error-100: theme('colors.int-wp-state-error-dark.100');
   --wp-state-neutral-100: theme('colors.int-wp-state-neutral.100');
   --wp-state-ok-100: theme('colors.int-wp-state-ok-dark.100');
   --wp-state-info-100: theme('colors.int-wp-state-info-dark.100');
@@ -105,7 +103,7 @@ body,
 }
 
 .vue-notification {
-  @apply rounded-md text-base border-l-6;
+  @apply border-l-6 rounded-md text-base;
 }
 
 .vue-notification .notification-title {
@@ -117,7 +115,7 @@ body,
 }
 
 .vue-notification.error {
-  @apply !bg-wp-control-error-100 !border-l-wp-control-error-300;
+  @apply !bg-wp-error-100 !dark:bg-wp-error-200 !border-l-wp-error-300;
 }
 
 *::-webkit-scrollbar {
@@ -131,7 +129,7 @@ body,
 *::-webkit-scrollbar-thumb {
   transition: background 0.2s ease-in-out;
   border: 3px solid transparent;
-  @apply bg-cool-gray-200 dark:bg-dark-200 rounded-full bg-clip-content;
+  @apply bg-clip-content bg-cool-gray-200 dark:bg-dark-200 rounded-full;
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -143,11 +141,11 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 p-4 rounded-md text-wp-code-text-100 text-sm break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-code-text-100 break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-200 rounded-md text-wp-code-text-100 px-1 py-px;
+  @apply bg-wp-code-200 px-1 py-px rounded-md text-wp-code-text-100;
 }

web/src/views/admin/AdminOrgs.vue

@@ -22,7 +22,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.orgs.delete_org')"
-          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+          class="ml-2 w-8 h-8 hover:text-wp-error-100"
           :is-loading="isDeleting"
           @click="deleteOrg(org)"
         />

web/src/views/admin/AdminQueue.vue

@@ -13,7 +13,7 @@
           <Icon
             :name="queueInfo.paused ? 'pause' : 'play'"
             :class="{
-              'text-wp-state-error-100': queueInfo.paused,
+              'text-wp-error-100': queueInfo.paused,
               'text-wp-state-ok-100': !queueInfo.paused,
             }"
           />
@@ -29,7 +29,7 @@
         <ListItem
           v-for="task in tasks"
           :key="task.id"
-          class="items-center mb-2 !bg-wp-background-200 !dark:bg-wp-background-100"
+          class="items-center !bg-wp-background-200 !dark:bg-wp-background-100 mb-2"
         >
           <div
             class="flex items-center"
@@ -50,14 +50,14 @@
                     : 'status-declined'
               "
               :class="{
-                'text-wp-state-error-100': task.status === 'waiting_on_deps',
+                'text-wp-error-100': task.status === 'waiting_on_deps',
                 'text-wp-state-info-100': task.status === 'running',
                 'text-wp-state-neutral-100': task.status === 'pending',
               }"
             />
           </div>
           <span class="ml-2">{{ task.id }}</span>
-          <span class="flex ml-auto gap-2">
+          <span class="flex gap-2 ml-auto">
             <Badge v-if="task.agent_id !== 0" :label="$t('admin.settings.queue.agent')" :value="task.agent_id" />
             <template v-for="(value, label) in task.labels">
               <Badge v-if="value" :key="label" :label="label.toString()" :value="value" />

web/src/views/admin/AdminUsers.vue

@@ -20,7 +20,7 @@
         <span>{{ user.login }}</span>
         <Badge
           v-if="user.admin"
-          class="ml-auto hidden md:inline-block"
+          class="md:inline-block hidden ml-auto"
           :label="$t('admin.settings.users.admin.admin')"
         />
         <IconButton
@@ -33,7 +33,7 @@
         <IconButton
           icon="trash"
           :title="$t('admin.settings.users.delete_user')"
-          class="ml-2 w-8 h-8 hover:text-wp-control-error-100"
+          class="ml-2 w-8 h-8 hover:text-wp-error-100"
           :is-loading="isDeleting"
           @click="deleteUser(user)"
         />
@@ -53,7 +53,7 @@
 
         <InputField v-slot="{ id }" :label="$t('admin.settings.users.avatar_url')">
           <div class="flex gap-2">
-            <img v-if="selectedUser.avatar_url" class="rounded-md h-8 w-8" :src="selectedUser.avatar_url" />
+            <img v-if="selectedUser.avatar_url" class="rounded-md w-8 h-8" :src="selectedUser.avatar_url" />
             <TextField :id="id" v-model="selectedUser.avatar_url" />
           </div>
         </InputField>

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

@@ -11,7 +11,7 @@
         <Container v-if="pipeline!.errors?.some((e) => !e.is_warning)" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4 text-center">
-              <Icon name="status-error" class="w-16 h-16 text-wp-state-error-100" size="1.5rem" />
+              <Icon name="status-error" class="w-16 h-16 text-wp-error-100" 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 @@
         <Container v-else-if="pipeline!.status === 'declined'" fill-width class="p-0">
           <Panel>
             <div class="flex flex-col items-center gap-4">
-              <Icon name="status-declined" size="1.5rem" class="w-16 h-16 text-wp-state-error-100" />
+              <Icon name="status-declined" size="1.5rem" class="w-16 h-16 text-wp-error-100" />
               <p class="text-xl">{{ $t('repo.pipeline.protected.declined') }}</p>
             </div>
           </Panel>

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="text-sm text-wp-text-alt-100 mb-2">{{ $t('repo.pipeline.debug.metadata_exec_desc') }}</p>
+        <p class="mb-2 text-sm text-wp-text-alt-100">{{ $t('repo.pipeline.debug.metadata_exec_desc') }}</p>
         <pre class="code-box">{{ cliExecWithMetadata }}</pre>
       </InputField>
       <div class="flex items-center space-x-4">
@@ -10,9 +10,9 @@
       </div>
     </Panel>
   </template>
-  <div v-else class="flex items-center justify-center h-full">
-    <div class="text-center p-8 bg-wp-control-error-100 rounded-lg shadow-lg">
-      <p class="text-2xl font-bold text-white">{{ $t('repo.pipeline.debug.no_permission') }}</p>
+  <div v-else class="flex justify-center items-center h-full">
+    <div class="bg-wp-error-100 dark:bg-wp-error-200 shadow-lg p-8 rounded-lg text-center">
+      <p class="font-bold text-2xl text-white">{{ $t('repo.pipeline.debug.no_permission') }}</p>
     </div>
   </div>
 </template>

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

@@ -10,7 +10,7 @@
                 class="flex-shrink-0 my-1"
                 :class="{
                   'text-wp-state-warn-100': error.is_warning,
-                  'text-wp-state-error-100': !error.is_warning,
+                  'text-wp-error-100': !error.is_warning,
                 }"
               />
               <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->

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

@@ -18,13 +18,13 @@
     </template>
 
     <template #headerActions>
-      <div class="flex md:items-center flex-col gap-2 md:flex-row md:justify-between min-w-0">
+      <div class="flex md:flex-row flex-col md:justify-between md:items-center gap-2 min-w-0">
         <div class="flex content-start gap-2 min-w-0">
           <PipelineStatusIcon :status="pipeline.status" class="flex flex-shrink-0" />
           <span class="flex-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 whitespace-nowrap overflow-hidden overflow-ellipsis" :title="message">{{
+          <span class="md:inline-block hidden">-</span>
+          <span class="min-w-0 whitespace-nowrap overflow-ellipsis overflow-hidden" :title="message">{{
             shortMessage
           }}</span>
         </div>
@@ -62,11 +62,11 @@
 
     <template #tabActions>
       <div class="flex gap-x-4">
-        <div class="flex space-x-1 items-center flex-shrink-0" :title="$t('repo.pipeline.created', { created })">
+        <div class="flex flex-shrink-0 items-center space-x-1" :title="$t('repo.pipeline.created', { created })">
           <Icon name="since" />
           <span>{{ since }}</span>
         </div>
-        <div class="flex space-x-1 items-center flex-shrink-0" :title="$t('repo.pipeline.duration')">
+        <div class="flex flex-shrink-0 items-center space-x-1" :title="$t('repo.pipeline.duration')">
           <Icon name="duration" />
           <span>{{ duration }}</span>
         </div>
@@ -80,7 +80,7 @@
       icon="attention"
       :title="pipeline.errors.some((e) => !e.is_warning) ? $t('repo.pipeline.errors') : $t('repo.pipeline.warnings')"
       :count="pipeline.errors?.length"
-      :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-state-error-100' : 'text-wp-state-warn-100'"
+      :icon-class="pipeline.errors.some((e) => !e.is_warning) ? 'text-wp-error-100' : 'text-wp-state-warn-100'"
     />
     <Tab :to="{ name: 'repo-pipeline-config' }" :title="$t('repo.pipeline.config')" />
     <Tab

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

@@ -32,7 +32,7 @@
         <IconButton icon="edit" class="w-8 h-8" :title="$t('repo.settings.crons.edit')" @click="selectedCron = cron" />
         <IconButton
           icon="trash"
-          class="w-8 h-8 hover:text-wp-control-error-100"
+          class="w-8 h-8 hover:text-wp-error-100"
           :is-loading="isDeleting"
           :title="$t('repo.settings.crons.delete')"
           @click="deleteCron(cron)"
@@ -74,7 +74,7 @@
           />
         </InputField>
 
-        <div v-if="isEditingCron" class="ml-auto mb-4">
+        <div v-if="isEditingCron" class="mb-4 ml-auto">
           <span v-if="selectedCron.next_exec && selectedCron.next_exec > 0" class="text-wp-text-100">
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
             {{ $t('repo.settings.crons.next_exec') }}:

web/windi.config.ts

@@ -78,23 +78,11 @@ export default defineConfig({
           200: tinycolor(customColors['wp-primary'][500]).desaturate(10).toString(),
           300: tinycolor(customColors['wp-primary'][600]).desaturate(10).toString(),
         },
-        'int-wp-control-error': {
+        'int-wp-error': {
           100: colors.red[700],
           200: colors.red[800],
           300: colors.red[900],
         },
-        'int-wp-control-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
-          200: tinycolor(colors.red[800]).desaturate(25).toString(),
-          300: tinycolor(colors.red[900]).desaturate(25).toString(),
-        },
-
-        'int-wp-state-error': {
-          100: colors.red[700],
-        },
-        'int-wp-state-error-dark': {
-          100: tinycolor(colors.red[700]).desaturate(25).toString(),
-        },
         'int-wp-state-neutral': {
           100: colors.gray[600],
         },
@@ -166,15 +154,12 @@ export default defineConfig({
           200: 'var(--wp-control-ok-200)',
           300: 'var(--wp-control-ok-300)',
         },
-        'wp-control-error': {
-          100: 'var(--wp-control-error-100)',
-          200: 'var(--wp-control-error-200)',
-          300: 'var(--wp-control-error-300)',
+        'wp-error': {
+          100: 'var(--wp-error-100)',
+          200: 'var(--wp-error-200)',
+          300: 'var(--wp-error-300)',
         },
 
-        'wp-state-error': {
-          100: 'var(--wp-state-error-100)',
-        },
         'wp-state-neutral': {
           100: 'var(--wp-state-neutral-100)',
         },