feat: add xcode light/dark theme (#589)

* feat: add xcode light/dark theme * Create seven-shirts-hide.md
riccardoperra · Dec 3, 2023 · 953a081 · 953a081
1 parent 13655b1
commit 953a081
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 3 deletions.
diff --git a/.changeset/seven-shirts-hide.md b/.changeset/seven-shirts-hide.md
@@ -0,0 +1,6 @@
+---
+"@codeimage/app": patch
+"@codeimage/highlight": patch
+---
+
+feat: add xcode light/dark theme
diff --git a/apps/codeimage/src/state/theme/themeRegistry.ts b/apps/codeimage/src/state/theme/themeRegistry.ts
@@ -16,6 +16,11 @@ export const THEME_REGISTRY: ReadonlyArray<ThemeRegistryEntry> = [
     // prettier-ignore
     load: () => import('@codeimage/highlight/themes').then(m => m.vsCodeDarkTheme),
   },
+  {
+    id: 'xcodeDarkTheme',
+    // prettier-ignore
+    load: () => import('@codeimage/highlight/themes').then(m => m.xCodeDarkTheme),
+  },
   {
     id: 'nightOwlTheme',
     // prettier-ignore
@@ -36,6 +41,11 @@ export const THEME_REGISTRY: ReadonlyArray<ThemeRegistryEntry> = [
     // prettier-ignore
     load: () => import('@codeimage/highlight/themes').then(m => m.draculaTheme),
   },
+  {
+    id: 'xcodeLightTheme',
+    // prettier-ignore
+    load: () => import('@codeimage/highlight/themes').then(m => m.xCodeLightTheme),
+  },
   {
     id: 'materialOcean',
     // prettier-ignore

diff --git a/packages/highlight/dev/Editor/Editor.tsx b/packages/highlight/dev/Editor/Editor.tsx
@@ -20,7 +20,7 @@ interface CustomEditorPreviewProps {
 export default function Editor(props: VoidProps<CustomEditorPreviewProps>) {
   const {editorView, ref: setEditorRef, createExtension} = createCodeMirror();
   createEditorControlledValue(editorView, () => props.code);
-  createEditorReadonly(editorView, () => true);
+  createEditorReadonly(editorView, () => false);
 
   const previewEditorBaseTheme = () =>
     EditorView.theme({

diff --git a/packages/highlight/package.json b/packages/highlight/package.json
@@ -121,6 +121,14 @@
     "./fleetDark": {
       "import": "./dist/lib/themes/fleetDark/index.js",
       "types": "./dist/lib/themes/fleetDark/index.d.ts"
+    },
+    "./xCodeDark": {
+      "import": "./dist/lib/themes/xCodeDark/index.js",
+      "types": "./dist/lib/themes/xCodeDark/index.d.ts"
+    },
+    "./xCodeLight": {
+      "import": "./dist/lib/themes/xCodeLight/index.js",
+      "types": "./dist/lib/themes/xCodeLight/index.d.ts"
     }
   },
   "typesVersions": {
@@ -205,6 +213,12 @@
       ],
       "fleetDark": [
         "./dist/lib/themes/fleetDark/index.d.ts"
+      ],
+      "xCodeDark": [
+        "./dist/lib/themes/xCodeDark/index.d.ts"
+      ],
+      "xCodeLight": [
+        "./dist/lib/themes/xCodeLight/index.d.ts"
       ]
     }
   },
@@ -262,4 +276,4 @@
     "vite-plugin-dts": "^1.7.3",
     "vite-plugin-solid": "^2.6.1"
   }
-}
+}
diff --git a/packages/highlight/src/lib/plugins/highlight-style.ts b/packages/highlight/src/lib/plugins/highlight-style.ts
@@ -83,7 +83,12 @@ export function styledHighlight(h: StyledHighlightOptions) {
         color: h.numbers,
       },
       {
-        tag: [t.string, t.processingInstruction, t.inserted],
+        tag: [
+          t.string,
+          t.processingInstruction,
+          t.inserted,
+          t.special(t.string),
+        ],
         color: h.strings,
       },
       // Classes

diff --git a/packages/highlight/src/lib/themes/index.ts b/packages/highlight/src/lib/themes/index.ts
@@ -24,3 +24,5 @@ export * from './shadeOfPurple';
 export * from './synthwave84';
 export * from './vitesseDark';
 export * from './vsCodeDark';
+export * from './xCodeDark';
+export * from './xCodeLight';
diff --git a/packages/highlight/src/lib/themes/xCodeDark/index.ts b/packages/highlight/src/lib/themes/xCodeDark/index.ts
@@ -0,0 +1,16 @@
+import {createTheme} from '../../core';
+import {palette, xCodeDark} from './xCodeDark';
+
+export const xCodeDarkTheme = createTheme({
+  id: 'xCodeDark',
+  editorTheme: xCodeDark,
+  properties: {
+    darkMode: true,
+    label: 'XCode Dark',
+    previewBackground: `linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)`,
+    terminal: {
+      main: palette.foreground,
+      text: palette.text,
+    },
+  },
+} as const);
diff --git a/packages/highlight/src/lib/themes/xCodeDark/xCodeDark.ts b/packages/highlight/src/lib/themes/xCodeDark/xCodeDark.ts
@@ -0,0 +1,85 @@
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
+import {defineEditorTheme} from '../../core';
+
+const colors = {
+  pink: '#FF79B2',
+  violetLight: '#E5CFFF',
+  violet: '#D9BBFF',
+  purple: '#BB81FE',
+  cyan: '#5FBCDC',
+  orange: '#FE6465',
+  gray3: '#727377',
+  gray2: '#7F8C98',
+  green: '#8AD1C2',
+  green3: '#ACF2E4',
+  blue: '#4FB0CB',
+  yellow: '#FEE98B',
+};
+
+export const palette = {
+  foreground: '#1F1F24',
+  text: '#CECFD0',
+  text2: '#bebebe',
+  punctuation: '#fff',
+  numbers: colors.yellow,
+  strings: colors.orange,
+  property: colors.green,
+  keywords: colors.pink,
+  comments: colors.gray2,
+  className: colors.cyan,
+  function: colors.violet,
+};
+
+export const xCodeDark = [
+  syntaxHighlighting(
+    HighlightStyle.define([
+      {
+        tag: [tags.angleBracket],
+        color: colors.purple,
+      },
+      {
+        tag: [tags.definition(tags.variableName)],
+        color: colors.blue,
+      },
+    ]),
+  ),
+  defineEditorTheme({
+    highlight: {
+      punctuation: palette.punctuation,
+      delimiters: palette.punctuation,
+      numbers: palette.numbers,
+      strings: palette.strings,
+      regexp: palette.strings,
+      meta: colors.violet,
+      variableName: palette.property,
+      keywords: palette.keywords,
+      base: palette.text,
+      tag: colors.violet,
+      comments: palette.comments,
+      propertyName: palette.property,
+      className: palette.className,
+      function: palette.function,
+      typeName: colors.violetLight,
+      attrName: colors.purple,
+    },
+    selection: {
+      color: '#0000000f',
+      backgroundColor: '#0000000f',
+      activeLine: '#0000000f',
+    },
+    lineNumbers: {
+      color: palette.text2,
+    },
+    cursor: {
+      color: palette.text2,
+    },
+    autocomplete: {
+      background: '#202020',
+      border: '#3c3c3c',
+      selectedBackground: colors.purple,
+      selectedColor: '#fff',
+    },
+    darkMode: true,
+  }),
+];
diff --git a/packages/highlight/src/lib/themes/xCodeLight/index.ts b/packages/highlight/src/lib/themes/xCodeLight/index.ts
@@ -0,0 +1,16 @@
+import {createTheme} from '../../core';
+import {xCodeLight, palette} from './xCodeLight';
+
+export const xCodeLightTheme = createTheme({
+  id: 'xCodeLight',
+  editorTheme: xCodeLight,
+  properties: {
+    darkMode: false,
+    label: 'XCode Light',
+    previewBackground: `linear-gradient(to right bottom, #ffcc99, #f6bd83, #edad6e, #e49e59, #da8f44)`,
+    terminal: {
+      main: palette.foreground,
+      text: palette.text,
+    },
+  },
+} as const);
diff --git a/packages/highlight/src/lib/themes/xCodeLight/xCodeLight.ts b/packages/highlight/src/lib/themes/xCodeLight/xCodeLight.ts
@@ -0,0 +1,82 @@
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags} from '@lezer/highlight';
+import {defineEditorTheme} from '../../core';
+
+const colors = {
+  pink: '#c541ad',
+  violetDark: '#573E93',
+  violet: '#9157ea',
+  purple: '#59458B',
+  orange: '#D23423',
+  gray3: '#727377',
+  gray2: '#7F8C98',
+  blue: '#326C81',
+  darkBlue: '#322397',
+  darkGreen: '#1E566A',
+};
+
+export const palette = {
+  foreground: '#FFF',
+  text: '#191919',
+  text2: '#CACACA',
+  punctuation: '#1F1F24',
+  numbers: colors.darkBlue,
+  strings: colors.orange,
+  property: colors.darkGreen,
+  keywords: colors.pink,
+  comments: colors.gray2,
+  className: colors.darkGreen,
+  function: colors.violet,
+};
+
+export const xCodeLight = [
+  syntaxHighlighting(
+    HighlightStyle.define([
+      {
+        tag: [tags.angleBracket],
+        color: colors.purple,
+      },
+      {
+        tag: [tags.definition(tags.variableName)],
+        color: colors.blue,
+      },
+    ]),
+  ),
+  defineEditorTheme({
+    highlight: {
+      punctuation: palette.punctuation,
+      delimiters: palette.punctuation,
+      numbers: palette.numbers,
+      strings: palette.strings,
+      regexp: palette.strings,
+      meta: colors.violet,
+      variableName: palette.property,
+      keywords: palette.keywords,
+      base: palette.text,
+      tag: colors.violet,
+      comments: palette.comments,
+      propertyName: palette.property,
+      className: palette.className,
+      function: palette.function,
+      typeName: colors.darkGreen,
+      attrName: colors.purple,
+    },
+    selection: {
+      color: colors.gray3,
+      activeLine: '#ffffff0f',
+    },
+    lineNumbers: {
+      color: palette.text2,
+    },
+    cursor: {
+      color: palette.text2,
+    },
+    autocomplete: {
+      background: '#fff',
+      border: '#c5c5c5',
+      selectedBackground: colors.violetDark,
+      selectedColor: '#fff',
+    },
+    darkMode: true,
+  }),
+];