Merge pull request #168 from riccardoperra/167-broken-editor-autocomp…

…lete-style fix: broken editor autocomplete style #167
riccardoperra · Apr 4, 2022 · 50c1639 · 50c1639
2 parents 066788b + 7012ef8
commit 50c1639
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 7 deletions.
diff --git a/.changeset/four-mugs-kick.md b/.changeset/four-mugs-kick.md
@@ -0,0 +1,5 @@
+---
+'@codeimage/theme': patch
+---
+
+fix: add editor auto-complete theme style
diff --git a/packages/theme/src/lib/plugins/autocomplete-style.ts b/packages/theme/src/lib/plugins/autocomplete-style.ts
@@ -0,0 +1,37 @@
+import {EditorView} from '@codemirror/view';
+
+interface StyledAutoCompleteOptions {
+  background: string;
+  border?: string;
+  selectedBackground: string;
+  selectedColor?: string;
+}
+
+export function styledAutocomplete(options: StyledAutoCompleteOptions) {
+  return EditorView.theme({
+    '.cm-tooltip': {
+      border: options.border ? `1px solid ${options.border}` : 'none',
+      backgroundColor: options.background,
+      borderRadius: '6px',
+    },
+
+    '.cm-tooltip .cm-tooltip-arrow:before': {
+      borderTopColor: 'transparent',
+      borderBottomColor: 'transparent',
+    },
+    '.cm-tooltip .cm-tooltip-arrow:after': {
+      borderTopColor: options.background,
+      borderBottomColor: options.background,
+    },
+
+    '.cm-tooltip-autocomplete': {
+      '& > ul > li': {
+        padding: '6px !important',
+      },
+      '& > ul > li[aria-selected]': {
+        backgroundColor: options.selectedBackground,
+        color: options.selectedColor ?? 'inherit',
+      },
+    },
+  });
+}
diff --git a/packages/theme/src/lib/themes/coldark/index.ts b/packages/theme/src/lib/themes/coldark/index.ts
@@ -1,6 +1,7 @@
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
 import {coldarkCold} from './coldark-cold';
 import {coldarkDark} from './coldark-dark';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const coldarkColdTheme = createPrismJsTheme({
   id: 'coldarkCold',
@@ -19,7 +20,13 @@ export const coldarkColdTheme = createPrismJsTheme({
 
 export const coldarkDarkTheme = createPrismJsTheme({
   id: 'coldarkDark',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#142231',
+      selectedBackground: '#122335',
+      selectedColor: '#e9ae7e',
+    }),
+  ],
   externalStylesheet: coldarkDark,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/duotone-dark/index.ts b/packages/theme/src/lib/themes/duotone-dark/index.ts
@@ -1,9 +1,16 @@
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
 import {duotoneDark} from './duotone-dark';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const duotoneDarkTheme = createPrismJsTheme({
   id: 'duotoneDark',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#211f2a',
+      selectedBackground: '#1d1b28',
+      selectedColor: '#9a86fd',
+    }),
+  ],
   externalStylesheet: duotoneDark,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/duotone-sea/index.ts b/packages/theme/src/lib/themes/duotone-sea/index.ts
@@ -1,9 +1,16 @@
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
 import {duotoneSea} from './duotone-sea';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const duotoneSeaTheme = createPrismJsTheme({
   id: 'duotoneSea',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#06535d',
+      selectedBackground: '#043f45',
+      selectedColor: '#D6E9FF',
+    }),
+  ],
   externalStylesheet: duotoneSea,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/holi/index.ts b/packages/theme/src/lib/themes/holi/index.ts
@@ -1,9 +1,16 @@
 import {holi} from './holi';
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const holiTheme = createPrismJsTheme({
   id: 'holiTheme',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#122f6d',
+      selectedBackground: '#1a1a82',
+      selectedColor: '#d6b007',
+    }),
+  ],
   externalStylesheet: holi,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/material-ocean/vs.ts b/packages/theme/src/lib/themes/material-ocean/vs.ts
@@ -214,6 +214,7 @@ export const materialOceanTheme = EditorView.theme(
       border: 'none',
       backgroundColor: palette.background,
     },
+
     '.cm-tooltip .cm-tooltip-arrow:before': {
       borderTopColor: 'transparent',
       borderBottomColor: 'transparent',
@@ -227,6 +228,7 @@ export const materialOceanTheme = EditorView.theme(
         backgroundColor: `${palette.lineHighlight}50`,
       },
     },
+
     '.cm-function': {
       color: palette.base.purple,
     },

diff --git a/packages/theme/src/lib/themes/material-palenight/index.ts b/packages/theme/src/lib/themes/material-palenight/index.ts
@@ -1,9 +1,16 @@
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
 import {materialPalenight} from './material-palenight';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const materialPalenightTheme = createPrismJsTheme({
   id: 'materialPalenight',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#1f212e',
+      selectedBackground: '#181923',
+      selectedColor: '#FFCB6B',
+    }),
+  ],
   externalStylesheet: materialPalenight,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/night-owl/index.ts b/packages/theme/src/lib/themes/night-owl/index.ts
@@ -1,9 +1,17 @@
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
 import {nightOwl} from './night-owl';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const nightOwlTheme = createPrismJsTheme({
   id: 'nightOwlTheme',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#011423',
+      border: '#5f7e97',
+      selectedBackground: '#011220',
+      selectedColor: 'rgb(247, 140, 108)',
+    }),
+  ],
   externalStylesheet: nightOwl,
   properties: {
     darkMode: true,

diff --git a/packages/theme/src/lib/themes/vscode-dark/index.ts b/packages/theme/src/lib/themes/vscode-dark/index.ts
@@ -1,10 +1,16 @@
 import {palette} from '../synthwave84/synthwave84';
 import {vsCodeDark} from './vscode-dark';
 import {createPrismJsTheme} from '../../prismjs/prismjs-theme-factory';
+import {styledAutocomplete} from '../../plugins/autocomplete-style';
 
 export const vsCodeDarkTheme = createPrismJsTheme({
   id: 'vsCodeDarkTheme',
-  editorTheme: [],
+  editorTheme: [
+    styledAutocomplete({
+      background: '#1E1E1E',
+      selectedBackground: '#191818',
+    }),
+  ],
   externalStylesheet: vsCodeDark,
   properties: {
     darkMode: true,