Fix inline styles for CodeBlock component (#2444)

* Fix inline Codeblock and use css color variables * Fix min color contrast ratio
temporalio · Nov 27, 2024 · 96756db · 96756db
1 parent 833340f
commit 96756db
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 29 deletions.
diff --git a/src/lib/holocene/code-block.svelte b/src/lib/holocene/code-block.svelte
@@ -16,7 +16,6 @@
   import { EditorState } from '@codemirror/state';
   import { EditorView, keymap } from '@codemirror/view';
   import { createEventDispatcher, onMount } from 'svelte';
-  import { twMerge as merge } from 'tailwind-merge';
 
   import CopyButton from '$lib/holocene/copyable/button.svelte';
   import { copyToClipboard } from '$lib/utilities/copy-to-clipboard';
@@ -27,7 +26,6 @@
   } from '$lib/utilities/parse-with-big-int';
   import {
     TEMPORAL_SYNTAX,
-    TEMPORAL_SYNTAX_DARK,
     TEMPORAL_THEME,
   } from '$lib/vendor/codemirror/theme';
 
@@ -113,9 +111,7 @@
     const extensions = [
       keymap.of([...standardKeymap, ...historyKeymap]),
       TEMPORAL_THEME(isDark),
-      syntaxHighlighting(isDark ? TEMPORAL_SYNTAX_DARK : TEMPORAL_SYNTAX, {
-        fallback: true,
-      }),
+      syntaxHighlighting(TEMPORAL_SYNTAX, { fallback: true }),
       indentUnit.of('  '),
       closeBrackets(),
       autocompletion(),
@@ -195,7 +191,7 @@
 <div class="relative min-w-[80px] grow">
   <div
     bind:this={editor}
-    class={merge('surface-primary rounded border-2 border-subtle', className)}
+    class={className}
     class:inline
     data-testid={$$props.testId}
     class:editable

diff --git a/src/lib/theme/variables.ts b/src/lib/theme/variables.ts
@@ -48,7 +48,7 @@ export const variables = {
     dark: 'yellow.500',
   },
   '--color-text-pink': {
-    light: 'pink.500',
+    light: 'pink.800',
     dark: 'pink.400',
   },
   '--color-text-brand': {

diff --git a/src/lib/vendor/codemirror/theme.ts b/src/lib/vendor/codemirror/theme.ts
@@ -3,17 +3,24 @@ import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import colors from 'tailwindcss/colors';
 
+import { css } from '$lib/theme/utilities';
+
 export const TEMPORAL_THEME = (isDark) =>
   EditorView.theme(
     {
       '&': {
+        color: css('--color-text-primary'),
+        backgroundColor: css('--color-surface-primary'),
         borderRadius: '0.25rem',
+        borderWidth: '2px',
+        borderColor: css('--color-border-subtle'),
         padding: '0.5rem',
       },
       '.cm-scroller': {
         fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
       },
       '.cm-content': {
+        caretColor: css('--color-text-primary'),
         fontSize: '0.875em',
       },
       '.cm-editor&.cm-focused': {
@@ -29,28 +36,14 @@ export const TEMPORAL_THEME = (isDark) =>
 
 export const TEMPORAL_SYNTAX = HighlightStyle.define(
   [
-    { tag: tags.punctuation, color: colors.slate['800'] },
-    { tag: tags.string, color: colors.slate['800'] },
-    { tag: tags.propertyName, color: colors.indigo['600'] },
-    { tag: tags.bool, color: colors.slate['800'] },
-    { tag: tags.number, color: colors.slate['800'] },
-    { tag: tags.operator, color: colors.pink['400'] },
-    { tag: tags.comment, color: colors.green['400'] },
-    { tag: tags.variableName, color: colors.pink['600'] },
+    { tag: tags.punctuation, color: css('--color-text-primary') },
+    { tag: tags.string, color: css('--color-text-primary') },
+    { tag: tags.propertyName, color: css('--color-text-brand') },
+    { tag: tags.bool, color: css('--color-text-primary') },
+    { tag: tags.number, color: css('--color-text-primary') },
+    { tag: tags.operator, color: css('--color-text-pink') },
+    { tag: tags.comment, color: css('--color-text-success') },
+    { tag: tags.variableName, color: css('--color-text-pink') },
   ],
   { themeType: 'light' },
 );
-
-export const TEMPORAL_SYNTAX_DARK = HighlightStyle.define(
-  [
-    { tag: tags.punctuation, color: colors.slate['200'] },
-    { tag: tags.string, color: colors.slate['200'] },
-    { tag: tags.propertyName, color: colors.indigo['400'] },
-    { tag: tags.bool, color: colors.slate['200'] },
-    { tag: tags.number, color: colors.slate['200'] },
-    { tag: tags.operator, color: colors.pink['500'] },
-    { tag: tags.comment, color: colors.green['600'] },
-    { tag: tags.variableName, color: colors.pink['500'] },
-  ],
-  { themeType: 'dark' },
-);