Improve code highlighting in web UI (#4447)

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>

web/src/components/form/InputField.vue

@@ -6,7 +6,7 @@
       <slot v-else-if="$slots.titleActions" name="titleActions" />
     </div>
     <slot :id="id" />
-    <div v-if="$slots.description" class="text-wp-text-alt-100 ml-1">
+    <div v-if="$slots.description" class="text-wp-text-alt-100 ml-1 mt-1">
       <slot name="description" />
     </div>
   </div>

web/src/components/layout/Panel.vue

@@ -6,7 +6,7 @@
       :is="collapsable ? 'button' : 'div'"
       v-if="title"
       type="button"
-      class="text-wp-text-100 bg-wp-background-300 flex w-full gap-2 px-4 py-2 font-bold"
+      class="bg-wp-background-400 text-wp-text-100 flex w-full gap-2 px-4 py-2 font-bold"
       @click="_collapsed = !_collapsed"
     >
       <Icon

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

@@ -1,7 +1,7 @@
 <template>
   <div v-if="pipeline" class="flex flex-col pt-10 md:pt-0">
     <div
-      class="code-box !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
+      class="code-box-log !md:rounded-md flex flex-grow flex-col overflow-hidden !rounded-none !p-0 shadow md:mt-0"
       @mouseover="showActions = true"
       @mouseleave="showActions = false"
     >

web/src/style.css

@@ -38,8 +38,15 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-200: theme('colors.gray.200');
+
+  --wp-code-inline-text-100: theme('colors.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-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -86,9 +93,16 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn-dark.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn-dark.200');
 
-  --wp-code-100: theme('colors.int-wp-secondary.700');
+  --wp-code-inline-100: theme('colors.int-wp-secondary.700');
-  --wp-code-200: theme('colors.int-wp-secondary.800');
+  --wp-code-inline-200: theme('colors.int-wp-secondary.300');
-  --wp-code-text-100: theme('colors.gray.300');
+
+  --wp-code-inline-text-100: theme('colors.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-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
   --wp-link-100: theme('colors.blue.400');
@@ -141,11 +155,16 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-200 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 break-words rounded-md p-4 text-sm;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-200 text-wp-code-text-100 rounded-md px-1 py-px;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 rounded-md px-1.5 py-0.5;
+}
+
+.code-box-log {
+  @apply bg-wp-code-300 text-wp-code-text-100 break-words rounded-md p-4 text-sm;
+  white-space: pre-wrap;
 }

web/windi.config.ts

@@ -178,10 +178,21 @@ export default defineConfig({
           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)',
         },