feat(highlight): add new vitesseDark theme (riccardoperra#378)

Co-authored-by: Vikhyath A Maiya <[email protected]>

Author: Vikki123

packages/highlight/package.json

@@ -150,6 +150,10 @@
     "./moonlight": {
       "import": "./dist/lib/themes/moonlight/index.js",
       "types": "./dist/lib/themes/moonlight/index.d.ts"
+    },
+    "./vitesseDark": {
+      "import": "./dist/lib/themes/vitesseDark/index.js",
+      "types": "./dist/lib/themes/vitesseDark/index.d.ts"
     }
   },
   "typesVersions": {
@@ -222,7 +226,10 @@
       ],
       "moonlight": [
         "./dist/lib/themes/moonlight/index.d.ts"
+      ],
+      "vitesseDark": [
+        "./dist/lib/themes/vitesseDark/index.d.ts"
       ]
     }
   }
-}
+}

packages/highlight/src/lib/themes/index.ts

@@ -19,4 +19,5 @@ export * from './panda';
 export * from './poimandres';
 export * from './shadeOfPurple';
 export * from './synthwave84';
+export * from './vitesseDark';
 export * from './vsCodeDark';

packages/highlight/src/lib/themes/vitesseDark/index.ts

@@ -0,0 +1,16 @@
+import {createTheme} from '../../core';
+import {vitesseDark, palette} from './vitesseDark';
+
+export const vitesseDarkTheme = createTheme({
+  id: 'vitesseDark',
+  editorTheme: vitesseDark,
+  properties: {
+    darkMode: true,
+    label: 'Vitesse Dark',
+    previewBackground: `#0e0e0e`,
+    terminal: {
+      main: palette.foreground,
+      text: palette.string,
+    },
+  },
+} as const);

packages/highlight/src/lib/themes/vitesseDark/vitesseDark.ts

@@ -0,0 +1,57 @@
+import {defineEditorTheme} from '../../core';
+
+export const palette = {
+  foreground: '#121212',
+  comment: '#758575',
+  string: '#d48372',
+  literal: '#429988',
+  keyword: '#4d9375',
+  boolean: '#1c6b48',
+  number: '#6394bf',
+  variable: '#c2b36e',
+  function: '#a1b567',
+  deleted: '#a14f55',
+  class: '#54b1bf',
+  builtin: '#e0a569',
+  property: '#dd8e6e',
+  namespace: '#db889a',
+  punctuation: '#858585',
+  decorator: '#bd8f8f',
+  regex: '#ab5e3f',
+  lineNumber: '#888888',
+  selectionBackground: '#444444',
+};
+
+export const vitesseDark = [
+  defineEditorTheme({
+    highlight: {
+      punctuation: palette.punctuation,
+      delimiters: palette.punctuation,
+      numbers: palette.number,
+      strings: palette.string,
+      boolean: palette.boolean,
+      regexp: palette.regex,
+      variableName: palette.property,
+      keywords: palette.keyword,
+      base: palette.string,
+      tag: palette.punctuation,
+      comments: palette.comment,
+      propertyName: palette.property,
+      className: palette.class,
+      function: palette.function,
+    },
+    selection: {},
+    lineNumbers: {
+      color: palette.lineNumber,
+    },
+    cursor: {
+      color: palette.punctuation,
+    },
+    autocomplete: {
+      background: palette.string,
+      border: palette.punctuation,
+      selectedBackground: palette.selectionBackground,
+    },
+    darkMode: true,
+  }),
+];