From 5703b4678855cf17a85654bd7021c78552f219c7 Mon Sep 17 00:00:00 2001 From: Gonzalo Stoll Date: Mon, 23 Oct 2023 17:06:07 +0200 Subject: [PATCH 1/2] Adding gruvbox-material (dark and light) themes --- .../src/themes/gruvboxMaterialDark.ts | 79 +++++++++++++++++++ .../src/themes/gruvboxMaterialLight.ts | 78 ++++++++++++++++++ .../prism-react-renderer/src/themes/index.ts | 2 + 3 files changed, 159 insertions(+) create mode 100644 packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts create mode 100644 packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts new file mode 100644 index 0000000..b6dcba6 --- /dev/null +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts @@ -0,0 +1,79 @@ +// Gruvbox Material (dark) +// Author: Sainnhe Park (https://github.com/sainnhe) +// https://github.com/sainnhe/gruvbox-material +import type { PrismTheme } from "../types" +const theme: PrismTheme = { + plain: { + color: "#ebdbb2", + backgroundColor: "#292828", + }, + styles: [ + { + types: [ + "imports", + "class-name", + "maybe-class-name", + "constant", + "doctype", + "builtin", + "function", + ], + style: { + color: "#d8a657", + }, + }, + { + types: ["property-access"], + style: { + color: "#7daea3", // blue + }, + }, + { + types: ["tag"], + style: { + color: "#e78a4e", // orange + }, + }, + { + types: ["attr-name", "char", "url", "regex"], + style: { + color: "#a9b665", // green + }, + }, + { + types: ["attr-value", "string"], + style: { + color: "#89b482", // aqua + }, + }, + { + types: ["comment", "prolog", "cdata", "operator", "inserted"], + style: { + color: "#a89984", + }, + }, + { + types: [ + "delimiter", + "boolean", + "keyword", + "selector", + "important", + "atrule", + "property", + "variable", + "deleted", + ], + style: { + color: "#ea6962", // red + }, + }, + { + types: ["entity", "number", "symbol"], + style: { + color: "#d3869b", // purple + }, + }, + ], +} +export default theme diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts new file mode 100644 index 0000000..207c900 --- /dev/null +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts @@ -0,0 +1,78 @@ +// Gruvbox Material (light) +// Author: Sainnhe Park (https://github.com/sainnhe) +// https://github.com/sainnhe/gruvbox-material +import type { PrismTheme } from "../types" +const theme: PrismTheme = { + plain: { + color: "#654735", + backgroundColor: "#f9f5d7", + }, + styles: [ + { + types: [ + "delimiter", + "boolean", + "keyword", + "selector", + "important", + "atrule", + "property", + "variable", + "deleted", + ], + style: { + color: "#af2528", // red + }, + }, + { + types: [ + "imports", + "class-name", + "maybe-class-name", + "constant", + "doctype", + "builtin", + ], + style: { + color: "#b4730e", // yellow + }, + }, + { + types: ["string", "attr-value"], + style: { + color: "#477a5b", // aqua + }, + }, + { + types: ["property-access"], + style: { + color: "#266b79", // blue + }, + }, + { + types: ["function", "attr-name", "char", "url"], + style: { + color: "#72761e", // green + }, + }, + { + types: ["tag"], + style: { + color: "#b94c07", // orange + }, + }, + { + types: ["comment", "prolog", "cdata", "operator", "inserted"], + style: { + color: "#a89984", + }, + }, + { + types: ["entity", "number", "symbol"], + style: { + color: "#924f79", // purple + }, + }, + ], +} +export default theme diff --git a/packages/prism-react-renderer/src/themes/index.ts b/packages/prism-react-renderer/src/themes/index.ts index 827549e..e94ef1f 100644 --- a/packages/prism-react-renderer/src/themes/index.ts +++ b/packages/prism-react-renderer/src/themes/index.ts @@ -16,3 +16,5 @@ export { default as jettwaveDark } from "./jettwaveDark" export { default as jettwaveLight } from "./jettwaveLight" export { default as oneDark } from "./oneDark" export { default as oneLight } from "./oneLight" +export { default as gruvboxMaterialDark } from "./gruvboxMaterialDark" +export { default as gruvboxMaterialLight } from "./gruvboxMaterialLight" From b811a683ca46483752ce0ee5c4f84c5e17c73dc5 Mon Sep 17 00:00:00 2001 From: Gonzalo Stoll Date: Mon, 23 Oct 2023 17:11:12 +0200 Subject: [PATCH 2/2] Remove color comments --- .../src/themes/gruvboxMaterialDark.ts | 12 ++++++------ .../src/themes/gruvboxMaterialLight.ts | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts index b6dcba6..64d120f 100644 --- a/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialDark.ts @@ -25,25 +25,25 @@ const theme: PrismTheme = { { types: ["property-access"], style: { - color: "#7daea3", // blue + color: "#7daea3", }, }, { types: ["tag"], style: { - color: "#e78a4e", // orange + color: "#e78a4e", }, }, { types: ["attr-name", "char", "url", "regex"], style: { - color: "#a9b665", // green + color: "#a9b665", }, }, { types: ["attr-value", "string"], style: { - color: "#89b482", // aqua + color: "#89b482", }, }, { @@ -65,13 +65,13 @@ const theme: PrismTheme = { "deleted", ], style: { - color: "#ea6962", // red + color: "#ea6962", }, }, { types: ["entity", "number", "symbol"], style: { - color: "#d3869b", // purple + color: "#d3869b", }, }, ], diff --git a/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts index 207c900..ae544f6 100644 --- a/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts +++ b/packages/prism-react-renderer/src/themes/gruvboxMaterialLight.ts @@ -21,7 +21,7 @@ const theme: PrismTheme = { "deleted", ], style: { - color: "#af2528", // red + color: "#af2528", }, }, { @@ -34,31 +34,31 @@ const theme: PrismTheme = { "builtin", ], style: { - color: "#b4730e", // yellow + color: "#b4730e", }, }, { types: ["string", "attr-value"], style: { - color: "#477a5b", // aqua + color: "#477a5b", }, }, { types: ["property-access"], style: { - color: "#266b79", // blue + color: "#266b79", }, }, { types: ["function", "attr-name", "char", "url"], style: { - color: "#72761e", // green + color: "#72761e", }, }, { types: ["tag"], style: { - color: "#b94c07", // orange + color: "#b94c07", }, }, { @@ -70,7 +70,7 @@ const theme: PrismTheme = { { types: ["entity", "number", "symbol"], style: { - color: "#924f79", // purple + color: "#924f79", }, }, ],