From ad20389e942a44ab92955b9e6edeef2f19c4cee9 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenji.shiroma@westpac.com.au>
Date: Wed, 6 Dec 2023 14:40:42 +1000
Subject: [PATCH 1/2] changing the theme

---
 .../code/components/live-code/live-code.component.tsx     | 2 +-
 .../code/components/live-code/live-code.styles.ts         | 8 ++++----
 .../design-system/components/autocomplete/code.mdoc       | 2 +-
 apps/site/tailwind.config.ts                              | 1 +
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/site/src/components/code/components/live-code/live-code.component.tsx b/apps/site/src/components/code/components/live-code/live-code.component.tsx
index 734d6a0d0..2a598af61 100644
--- a/apps/site/src/components/code/components/live-code/live-code.component.tsx
+++ b/apps/site/src/components/code/components/live-code/live-code.component.tsx
@@ -81,7 +81,7 @@ export function LiveCode({ showCode = false, enableLiveCode = true, className }:
           <LiveEditor
             tabMode="focus"
             aria-label="Live code editor, press the escape key to leave the editor"
-            theme={themes.shadesOfPurple}
+            theme={themes.oceanicNext}
             code={live.code}
             language={live.language}
             disabled={live.disabled}
diff --git a/apps/site/src/components/code/components/live-code/live-code.styles.ts b/apps/site/src/components/code/components/live-code/live-code.styles.ts
index a2a1c6e14..920df0453 100644
--- a/apps/site/src/components/code/components/live-code/live-code.styles.ts
+++ b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -3,10 +3,10 @@ import { tv } from 'tailwind-variants';
 export const styles = tv({
   slots: {
     base: 'max-w-5xl bg-white p-6 pb-0',
-    displayWrapper: 'border-muted-50 relative -mx-6 -mt-6 p-6',
-    error: 'bg-danger-10 text-danger-90 flex gap-2 rounded-md p-2',
+    displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
+    error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
-    codeWrapper: 'border-muted-50 relative -mx-6 border-t',
+    codeWrapper: 'relative -mx-6 border-t border-muted-50 bg-[#282c34] p-[0.875rem] font-monospace text-base',
     arrowIcon: 'transition-transform',
     copyCodeButton:
       'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',
@@ -14,7 +14,7 @@ export const styles = tv({
   variants: {
     language: {
       html: {
-        base: 'bg-transparent',
+        base: 'bg-[transparent]',
         displayWrapper: 'p-0',
       },
     },
diff --git a/apps/site/src/content/design-system/components/autocomplete/code.mdoc b/apps/site/src/content/design-system/components/autocomplete/code.mdoc
index ec435208a..fbabedf7e 100644
--- a/apps/site/src/content/design-system/components/autocomplete/code.mdoc
+++ b/apps/site/src/content/design-system/components/autocomplete/code.mdoc
@@ -15,7 +15,7 @@
 
 ### Controlled
 
-```jsx
+```tsx
 () => {
   const [selectedKey, setSelectedKey] = useState<Key>();
   const handleSelectionChange = (key: Key) => {
diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
index b6b970c4a..f80a2f284 100644
--- a/apps/site/tailwind.config.ts
+++ b/apps/site/tailwind.config.ts
@@ -18,6 +18,7 @@ const config: Config = withGEL({
   theme: {
     extend: {
       fontFamily: {
+        monospace: 'monospace',
         'gel-sans': [
           'Graphik',
           '-apple-system',

From b110cc884a720a98041444e100882889900bc898 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenji.shiroma@westpac.com.au>
Date: Wed, 6 Dec 2023 14:49:09 +1000
Subject: [PATCH 2/2] fix

---
 .../components/code/components/live-code/live-code.styles.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/site/src/components/code/components/live-code/live-code.styles.ts b/apps/site/src/components/code/components/live-code/live-code.styles.ts
index 920df0453..a9de15774 100644
--- a/apps/site/src/components/code/components/live-code/live-code.styles.ts
+++ b/apps/site/src/components/code/components/live-code/live-code.styles.ts
@@ -6,7 +6,8 @@ export const styles = tv({
     displayWrapper: 'relative -mx-6 -mt-6 border-muted-50 p-6',
     error: 'flex gap-2 rounded-md bg-danger-10 p-2 text-danger-90',
     buttonWrapper: '-mx-6 -mb-6 flex items-center justify-end ',
-    codeWrapper: 'relative -mx-6 border-t border-muted-50 bg-[#282c34] p-[0.875rem] font-monospace text-base',
+    codeWrapper:
+      'relative -mx-6 border-t border-muted-50 bg-[#282c34] p-[0.875rem] font-monospace text-base leading-loose',
     arrowIcon: 'transition-transform',
     copyCodeButton:
       'typography-body-10 absolute right-0 top-0 p-1 pr-2 text-white opacity-50 transition-opacity hover:opacity-100',