Merge pull request #302 from Kalmarv/feat/poimandres

feat(highlight): add poimandres theme
riccardoperra · Jul 13, 2022 · 9700b71 · 9700b71
2 parents a2ab82d + 01cc5fd
commit 9700b71
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 0 deletions.
diff --git a/.changeset/swift-countries-rule.md b/.changeset/swift-countries-rule.md
@@ -0,0 +1,6 @@
+---
+"@codeimage/app": patch
+"@codeimage/highlight": patch
+---
+
+feat(highlight): add poimandres theme
diff --git a/apps/codeimage/src/state/theme/themeRegistry.ts b/apps/codeimage/src/state/theme/themeRegistry.ts
@@ -36,6 +36,11 @@ export const THEME_REGISTRY: ReadonlyArray<ThemeRegistryEntry> = [
     // prettier-ignore
     load: () => import('@codeimage/highlight/themes').then(m => m.synthwave84Theme),
   },
+  {
+    id: 'poimandres',
+    // prettier-ignore
+    load: () => import('@codeimage/highlight/themes').then(m => m.poimandresTheme),
+  },
   {
     id: 'materialVolcano',
     // prettier-ignore

diff --git a/packages/highlight/package.json b/packages/highlight/package.json
@@ -122,6 +122,10 @@
     "./githubLight": {
       "import": "./dist/lib/themes/githubLight/index.js",
       "types": "./dist/lib/themes/githubLight/index.d.ts"
+    },
+    "./poimandres": {
+      "import": "./dist/lib/themes/poimandres/index.js",
+      "types": "./dist/lib/themes/poimandres/index.d.ts"
     }
   },
   "typesVersions": {
@@ -180,6 +184,9 @@
       "githubLight": [
         "./dist/lib/themes/githubLight/index.d.ts"
       ],
+      "poimandres": [
+        "./dist/lib/themes/poimandres/index.d.ts"
+      ],
       "themes": [
         "./dist/lib/themes/index.d.ts"
       ]

diff --git a/packages/highlight/src/lib/themes/index.ts b/packages/highlight/src/lib/themes/index.ts
@@ -13,6 +13,7 @@ export * from './materialVolcano';
 export * from './nightOwl';
 export * from './oneDark';
 export * from './synthwave84';
+export * from './poimandres';
 export * from './vsCodeDark';
 export * from './githubDark';
 export * from './githubLight';
diff --git a/packages/highlight/src/lib/themes/poimandres/index.ts b/packages/highlight/src/lib/themes/poimandres/index.ts
@@ -0,0 +1,17 @@
+import {createTheme} from '../../core';
+import {poimandres, palette} from './poimandres';
+
+export const poimandresTheme = createTheme({
+  id: 'poimandres',
+  editorTheme: poimandres,
+  properties: {
+    darkMode: true,
+    label: 'Poimandres',
+    previewBackground:
+      'linear-gradient(140deg, rgb(165, 142, 251), rgb(65, 206, 189))',
+    terminal: {
+      main: palette.bg,
+      text: palette.darkerGray,
+    },
+  },
+} as const);
diff --git a/packages/highlight/src/lib/themes/poimandres/poimandres.ts b/packages/highlight/src/lib/themes/poimandres/poimandres.ts
@@ -0,0 +1,88 @@
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags as t} from '@lezer/highlight';
+import {defineEditorTheme} from '../../core';
+
+export const palette = {
+  brightYellow: '#fffac2',
+  brightMint: '#5DE4c7',
+  lowerMint: '#5fb3a1',
+  blueishGreen: '#42675A',
+  lowerBlue: '#89ddff',
+  lightBlue: '#ADD7FF',
+  desaturatedBlue: '#91B4D5',
+  bluishGrayBrighter: '#7390AA',
+  hotRed: '#d0679d',
+  pink: '#f087bd',
+  gray: '#a6accd',
+  lighterGray: '#c0cad5',
+  darkerGray: '#767c9d',
+  bluishGray: '#506477',
+  focus: '#303340',
+  bg: '#1b1e28',
+  offWhite: '#e4f0fb',
+  selection: '#717cb4',
+  white: '#ffffff',
+  black: '#000000',
+};
+
+export const poimandres = [
+  syntaxHighlighting(
+    HighlightStyle.define([
+      {tag: t.definitionKeyword, color: palette.desaturatedBlue},
+      {tag: t.controlKeyword, color: palette.lowerMint},
+      {
+        tag: t.comment,
+        fontStyle: 'italic',
+      },
+      {tag: t.processingInstruction, color: palette.lighterGray},
+      {
+        tag: [t.definition(t.function(t.variableName))],
+        color: palette.lightBlue,
+      },
+      {
+        tag: [t.literal],
+        color: palette.brightMint,
+      },
+    ]),
+  ),
+  defineEditorTheme({
+    highlight: {
+      keywords: palette.brightMint,
+      strings: palette.brightMint,
+      numbers: palette.brightMint,
+      boolean: palette.hotRed,
+      operators: palette.desaturatedBlue,
+      brackets: palette.gray,
+      paren: palette.gray,
+      comments: palette.darkerGray,
+      attrValue: palette.desaturatedBlue,
+      function: palette.lighterGray,
+      typeName: palette.darkerGray,
+      propertyName: palette.lightBlue,
+      variableName: palette.brightMint,
+      moduleKeyword: palette.brightMint,
+      tag: palette.brightMint,
+      base: palette.offWhite,
+      delimiters: palette.gray,
+      regexp: palette.brightMint,
+      self: palette.brightMint,
+      punctuation: palette.gray,
+      className: palette.lightBlue,
+      meta: palette.brightMint,
+    },
+    darkMode: true,
+    autocomplete: {
+      background: palette.bg,
+      selectedBackground: `${palette.selection}50`,
+    },
+    cursor: {
+      color: palette.gray,
+    },
+    selection: {
+      backgroundColor: `${palette.selection}25`,
+    },
+    lineNumbers: {
+      color: palette.darkerGray,
+    },
+  }),
+];