Merge pull request #456 from WestpacGEL/feture/live-code-theme

changing the code editor theme
WestpacGEL · Dec 6, 2023 · c5c6e1f · c5c6e1f
2 parents be70866 + b110cc8
commit c5c6e1f
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 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
@@ -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
@@ -3,18 +3,19 @@ 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 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',
   },
   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
@@ -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
@@ -18,6 +18,7 @@ const config: Config = withGEL({
   theme: {
     extend: {
       fontFamily: {
+        monospace: 'monospace',
         'gel-sans': [
           'Graphik',
           '-apple-system',