From a39154570f541e4589580fb2887f11654696ebe6 Mon Sep 17 00:00:00 2001
From: pat-s <patrick.schratz@gmail.com>
Date: Sat, 21 Dec 2024 22:34:03 +0100
Subject: [PATCH] use distinct classes for inline boxes

---
 web/src/style.css   | 26 +++++++++++++++++++-------
 web/windi.config.ts |  2 +-
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/web/src/style.css b/web/src/style.css
index c1b65d078..75770b0aa 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -39,9 +39,16 @@
   --wp-hint-warn-100: theme('colors.int-wp-hint-warn.100');
   --wp-hint-warn-200: theme('colors.int-wp-hint-warn.200');
 
-  --wp-code-100: theme('colors.gray.200');
-  --wp-code-300: theme('colors.int-wp-secondary.300');
-  --wp-code-600: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-text-100: theme('colors.gray.600');
+
+  /* --wp-code-300: theme('colors.int-wp-secondary.300');
+  --wp-code-600: theme('colors.int-wp-secondary.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.800');
+
   --wp-code-text-100: theme('colors.gray.200');
   --wp-code-text-alt-100: theme('colors.gray.300');
 
@@ -90,8 +97,13 @@
   --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.300');
-  --wp-code-200: theme('colors.int-wp-secondary.600');
+  --wp-code-inline-100: theme('colors.gray.200');
+  --wp-code-inline-text-100: theme('colors.int-wp-secondary.800');
+
+  --wp-code-100: theme('colors.int-wp-secondary.300'); /* #383c4a */
+  --wp-code-200: theme('colors.int-wp-secondary.600'); /* #2a2e3a */
+  --wp-code-300: theme('colors.int-wp-secondary.800');
+
   --wp-code-text-100: theme('colors.gray.300');
   --wp-code-text-alt-100: theme('colors.gray.400');
 
@@ -145,11 +157,11 @@ body,
 }
 
 .code-box {
-  @apply bg-wp-code-100 p-4 rounded-md text-sm text-wp-text-100 break-words;
+  @apply bg-wp-code-200 p-4 rounded-md text-sm text-wp-text-100 break-words;
   white-space: pre-wrap;
 }
 
 .code-box-inline,
 code:not(pre > code) {
-  @apply bg-wp-code-100 px-1.5 py-0.5 rounded-md text-wp-text-100;
+  @apply bg-wp-code-inline-100 text-wp-code-inline-text-100 px-1.5 py-0.5 rounded-md;
 }
diff --git a/web/windi.config.ts b/web/windi.config.ts
index 676ee6c29..46e305c69 100644
--- a/web/windi.config.ts
+++ b/web/windi.config.ts
@@ -197,7 +197,7 @@ export default defineConfig({
         'wp-code': {
           100: 'var(--wp-code-100)',
           200: 'var(--wp-code-200)',
-          300: 'var(--wp-code-100)',
+          300: 'var(--wp-code-300)',
         },
 
         'wp-code-text': {