From 005f8a7ddcbd56bc661366a60660346b2df89dd0 Mon Sep 17 00:00:00 2001 From: Riccardo Perra Date: Sun, 3 Dec 2023 19:47:21 +0100 Subject: [PATCH] feat: add xcode light/dark theme --- .../src/state/theme/themeRegistry.ts | 10 +++ packages/highlight/dev/Editor/Editor.tsx | 2 +- packages/highlight/package.json | 16 +++- .../src/lib/plugins/highlight-style.ts | 7 +- packages/highlight/src/lib/themes/index.ts | 2 + .../src/lib/themes/xCodeDark/index.ts | 16 ++++ .../src/lib/themes/xCodeDark/xCodeDark.ts | 85 +++++++++++++++++++ .../src/lib/themes/xCodeLight/index.ts | 16 ++++ .../src/lib/themes/xCodeLight/xCodeLight.ts | 82 ++++++++++++++++++ 9 files changed, 233 insertions(+), 3 deletions(-) create mode 100644 packages/highlight/src/lib/themes/xCodeDark/index.ts create mode 100644 packages/highlight/src/lib/themes/xCodeDark/xCodeDark.ts create mode 100644 packages/highlight/src/lib/themes/xCodeLight/index.ts create mode 100644 packages/highlight/src/lib/themes/xCodeLight/xCodeLight.ts diff --git a/apps/codeimage/src/state/theme/themeRegistry.ts b/apps/codeimage/src/state/theme/themeRegistry.ts index e5a1cbb51..0f35c82f0 100644 --- 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 = [ // 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 = [ // 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 index 592ba4aa2..2274c452c 100644 --- 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) { 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 index d8d5982cd..f6fa3b103 100644 --- 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" } -} +} \ No newline at end of file diff --git a/packages/highlight/src/lib/plugins/highlight-style.ts b/packages/highlight/src/lib/plugins/highlight-style.ts index f4f6e2d7d..cc0031b59 100644 --- 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 index 4b27b21fb..866a1f69b 100644 --- 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 new file mode 100644 index 000000000..09e11eebd --- /dev/null +++ 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 new file mode 100644 index 000000000..7107af1cf --- /dev/null +++ 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 new file mode 100644 index 000000000..cac124e1e --- /dev/null +++ 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 new file mode 100644 index 000000000..45898a284 --- /dev/null +++ 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, + }), +];