From 1e709d70fc757cb61af43df3e0094da853062b6a Mon Sep 17 00:00:00 2001 From: Blaine Richardson Date: Fri, 29 Jul 2022 18:31:44 -0500 Subject: [PATCH 1/5] refactor(one-dark): export all theme colors for reuse is needed --- src/one-dark.ts | 98 ++++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/src/one-dark.ts b/src/one-dark.ts index ea8d54f..849430d 100644 --- a/src/one-dark.ts +++ b/src/one-dark.ts @@ -5,89 +5,89 @@ import {tags as t} from "@lezer/highlight" // Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors -const chalky = "#e5c07b", - coral = "#e06c75", - cyan = "#56b6c2", - invalid = "#ffffff", - ivory = "#abb2bf", - stone = "#7d8799", // Brightened compared to original to increase contrast - malibu = "#61afef", - sage = "#98c379", - whiskey = "#d19a66", - violet = "#c678dd", - darkBackground = "#21252b", - highlightBackground = "#2c313a", - background = "#282c34", - tooltipBackground = "#353a42", - selection = "#3E4451", - cursor = "#528bff" +export const oneDarkChalky = "#e5c07b" +export const oneDarkCoral = "#e06c75" +export const oneDarkCyan = "#56b6c2" +export const oneDarkInvalid = "#ffffff" +export const oneDarkIvory = "#abb2bf" +export const oneDarkStone = "#7d8799" // Brightened compared to original to increase contrast +export const oneDarkMalibu = "#61afef" +export const oneDarkSage = "#98c379" +export const oneDarkWhiskey = "#d19a66" +export const oneDarkViolet = "#c678dd" +export const oneDarkDarkBackground = "#21252b" +export const oneDarkHighlightBackground = "#2c313a" +export const oneDarkBackground = "#282c34" +export const oneDarkTooltipBackground = "#353a42" +export const oneDarkSelection = "#3E4451" +export const oneDarkCursor = "#528bff" /// The editor theme styles for One Dark. export const oneDarkTheme = EditorView.theme({ "&": { - color: ivory, - backgroundColor: background + color: oneDarkIvory, + oneDarkBackgroundColor: oneDarkBackground }, ".cm-content": { - caretColor: cursor + caretColor: oneDarkCursor }, - ".cm-cursor, .cm-dropCursor": {borderLeftColor: cursor}, - "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {backgroundColor: selection}, + ".cm-oneDarkCursor, .cm-dropCursor": {borderLeftColor: oneDarkCursor}, + "&.cm-focused .cm-oneDarkSelectionBackground, .cm-oneDarkSelectionBackground, .cm-content ::oneDarkSelection": {oneDarkBackgroundColor: oneDarkSelection}, - ".cm-panels": {backgroundColor: darkBackground, color: ivory}, + ".cm-panels": {oneDarkBackgroundColor: oneDarkDarkBackground, color: oneDarkIvory}, ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"}, ".cm-panels.cm-panels-bottom": {borderTop: "2px solid black"}, ".cm-searchMatch": { - backgroundColor: "#72a1ff59", + oneDarkBackgroundColor: "#72a1ff59", outline: "1px solid #457dff" }, ".cm-searchMatch.cm-searchMatch-selected": { - backgroundColor: "#6199ff2f" + oneDarkBackgroundColor: "#6199ff2f" }, - ".cm-activeLine": {backgroundColor: highlightBackground}, - ".cm-selectionMatch": {backgroundColor: "#aafe661a"}, + ".cm-activeLine": {oneDarkBackgroundColor: oneDarkHighlightBackground}, + ".cm-oneDarkSelectionMatch": {oneDarkBackgroundColor: "#aafe661a"}, "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { - backgroundColor: "#bad0f847", + oneDarkBackgroundColor: "#bad0f847", outline: "1px solid #515a6b" }, ".cm-gutters": { - backgroundColor: background, - color: stone, + oneDarkBackgroundColor: oneDarkBackground, + color: oneDarkStone, border: "none" }, ".cm-activeLineGutter": { - backgroundColor: highlightBackground + oneDarkBackgroundColor: oneDarkHighlightBackground }, ".cm-foldPlaceholder": { - backgroundColor: "transparent", + oneDarkBackgroundColor: "transparent", border: "none", color: "#ddd" }, ".cm-tooltip": { border: "none", - backgroundColor: tooltipBackground + oneDarkBackgroundColor: oneDarkTooltipBackground }, ".cm-tooltip .cm-tooltip-arrow:before": { borderTopColor: "transparent", borderBottomColor: "transparent" }, ".cm-tooltip .cm-tooltip-arrow:after": { - borderTopColor: tooltipBackground, - borderBottomColor: tooltipBackground + borderTopColor: oneDarkTooltipBackground, + borderBottomColor: oneDarkTooltipBackground }, ".cm-tooltip-autocomplete": { "& > ul > li[aria-selected]": { - backgroundColor: highlightBackground, - color: ivory + oneDarkBackgroundColor: oneDarkHighlightBackground, + color: oneDarkIvory } } }, {dark: true}) @@ -95,21 +95,21 @@ export const oneDarkTheme = EditorView.theme({ /// The highlighting style for code in the One Dark theme. export const oneDarkHighlightStyle = HighlightStyle.define([ {tag: t.keyword, - color: violet}, + color: oneDarkViolet}, {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], - color: coral}, + color: oneDarkCoral}, {tag: [t.function(t.variableName), t.labelName], - color: malibu}, + color: oneDarkMalibu}, {tag: [t.color, t.constant(t.name), t.standard(t.name)], - color: whiskey}, + color: oneDarkWhiskey}, {tag: [t.definition(t.name), t.separator], - color: ivory}, + color: oneDarkIvory}, {tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], - color: chalky}, + color: oneDarkChalky}, {tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)], - color: cyan}, + color: oneDarkCyan}, {tag: [t.meta, t.comment], - color: stone}, + color: oneDarkStone}, {tag: t.strong, fontWeight: "bold"}, {tag: t.emphasis, @@ -117,17 +117,17 @@ export const oneDarkHighlightStyle = HighlightStyle.define([ {tag: t.strikethrough, textDecoration: "line-through"}, {tag: t.link, - color: stone, + color: oneDarkStone, textDecoration: "underline"}, {tag: t.heading, fontWeight: "bold", - color: coral}, + color: oneDarkCoral}, {tag: [t.atom, t.bool, t.special(t.variableName)], - color: whiskey }, + color: oneDarkWhiskey }, {tag: [t.processingInstruction, t.string, t.inserted], - color: sage}, + color: oneDarkSage}, {tag: t.invalid, - color: invalid}, + color: oneDarkInvalid}, ]) /// Extension to enable the One Dark theme (both the editor theme and From cd3e4da45180e5571885cc871b2bc27b742d8208 Mon Sep 17 00:00:00 2001 From: Blaine Richardson Date: Fri, 29 Jul 2022 19:01:53 -0500 Subject: [PATCH 2/5] chore: up package version - major package ugrade due to nomenclature and export additions/changes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ba85a5d..a7c6fbc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codemirror/theme-one-dark", - "version": "6.0.0", + "version": "7.0.0", "description": "One Dark theme for the CodeMirror code editor", "scripts": { "test": "cm-runtests", From 8bbddfb2e3f73b5b08bee644f35d0fde9a419b31 Mon Sep 17 00:00:00 2001 From: bRRRITSCOLD <31289446+bRRRITSCOLD@users.noreply.github.com> Date: Thu, 4 Aug 2022 05:25:25 -0500 Subject: [PATCH 3/5] fix: fixing rename of `backgroundColor` property --- src/one-dark.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/one-dark.ts b/src/one-dark.ts index 849430d..dfefae5 100644 --- a/src/one-dark.ts +++ b/src/one-dark.ts @@ -26,7 +26,7 @@ export const oneDarkCursor = "#528bff" export const oneDarkTheme = EditorView.theme({ "&": { color: oneDarkIvory, - oneDarkBackgroundColor: oneDarkBackground + backgroundColor: oneDarkBackground }, ".cm-content": { @@ -34,47 +34,47 @@ export const oneDarkTheme = EditorView.theme({ }, ".cm-oneDarkCursor, .cm-dropCursor": {borderLeftColor: oneDarkCursor}, - "&.cm-focused .cm-oneDarkSelectionBackground, .cm-oneDarkSelectionBackground, .cm-content ::oneDarkSelection": {oneDarkBackgroundColor: oneDarkSelection}, + "&.cm-focused .cm-oneDarkSelectionBackground, .cm-oneDarkSelectionBackground, .cm-content ::oneDarkSelection": {backgroundColor: oneDarkSelection}, - ".cm-panels": {oneDarkBackgroundColor: oneDarkDarkBackground, color: oneDarkIvory}, + ".cm-panels": {backgroundColor: oneDarkDarkBackground, color: oneDarkIvory}, ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"}, ".cm-panels.cm-panels-bottom": {borderTop: "2px solid black"}, ".cm-searchMatch": { - oneDarkBackgroundColor: "#72a1ff59", + backgroundColor: "#72a1ff59", outline: "1px solid #457dff" }, ".cm-searchMatch.cm-searchMatch-selected": { - oneDarkBackgroundColor: "#6199ff2f" + backgroundColor: "#6199ff2f" }, - ".cm-activeLine": {oneDarkBackgroundColor: oneDarkHighlightBackground}, - ".cm-oneDarkSelectionMatch": {oneDarkBackgroundColor: "#aafe661a"}, + ".cm-activeLine": {backgroundColor: oneDarkHighlightBackground}, + ".cm-oneDarkSelectionMatch": {backgroundColor: "#aafe661a"}, "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { - oneDarkBackgroundColor: "#bad0f847", + backgroundColor: "#bad0f847", outline: "1px solid #515a6b" }, ".cm-gutters": { - oneDarkBackgroundColor: oneDarkBackground, + backgroundColor: oneDarkBackground, color: oneDarkStone, border: "none" }, ".cm-activeLineGutter": { - oneDarkBackgroundColor: oneDarkHighlightBackground + backgroundColor: oneDarkHighlightBackground }, ".cm-foldPlaceholder": { - oneDarkBackgroundColor: "transparent", + backgroundColor: "transparent", border: "none", color: "#ddd" }, ".cm-tooltip": { border: "none", - oneDarkBackgroundColor: oneDarkTooltipBackground + backgroundColor: oneDarkTooltipBackground }, ".cm-tooltip .cm-tooltip-arrow:before": { borderTopColor: "transparent", @@ -86,7 +86,7 @@ export const oneDarkTheme = EditorView.theme({ }, ".cm-tooltip-autocomplete": { "& > ul > li[aria-selected]": { - oneDarkBackgroundColor: oneDarkHighlightBackground, + backgroundColor: oneDarkHighlightBackground, color: oneDarkIvory } } From 6fe4b7deb86c2feecb5944209ad2a6a4463bc5e4 Mon Sep 17 00:00:00 2001 From: bRRRITSCOLD <31289446+bRRRITSCOLD@users.noreply.github.com> Date: Thu, 4 Aug 2022 05:25:59 -0500 Subject: [PATCH 4/5] fix: backwards compat --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a7c6fbc..f27607e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@codemirror/theme-one-dark", - "version": "7.0.0", + "version": "6.1.0", "description": "One Dark theme for the CodeMirror code editor", "scripts": { "test": "cm-runtests", From 104d51f2344b7cba2f549f0c6f3b63047998504f Mon Sep 17 00:00:00 2001 From: bRRRITSCOLD <31289446+bRRRITSCOLD@users.noreply.github.com> Date: Thu, 4 Aug 2022 05:29:03 -0500 Subject: [PATCH 5/5] fix: renaming css slectors --- src/one-dark.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/one-dark.ts b/src/one-dark.ts index dfefae5..940fc2e 100644 --- a/src/one-dark.ts +++ b/src/one-dark.ts @@ -33,8 +33,8 @@ export const oneDarkTheme = EditorView.theme({ caretColor: oneDarkCursor }, - ".cm-oneDarkCursor, .cm-dropCursor": {borderLeftColor: oneDarkCursor}, - "&.cm-focused .cm-oneDarkSelectionBackground, .cm-oneDarkSelectionBackground, .cm-content ::oneDarkSelection": {backgroundColor: oneDarkSelection}, + ".cm-cursor, .cm-dropCursor": {borderLeftColor: oneDarkCursor}, + "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {backgroundColor: oneDarkSelection}, ".cm-panels": {backgroundColor: oneDarkDarkBackground, color: oneDarkIvory}, ".cm-panels.cm-panels-top": {borderBottom: "2px solid black"}, @@ -49,7 +49,7 @@ export const oneDarkTheme = EditorView.theme({ }, ".cm-activeLine": {backgroundColor: oneDarkHighlightBackground}, - ".cm-oneDarkSelectionMatch": {backgroundColor: "#aafe661a"}, + ".cm-selectionMatch": {backgroundColor: "#aafe661a"}, "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { backgroundColor: "#bad0f847",