From 23ce177166cb9280c7a202172f779bffeb2e729e Mon Sep 17 00:00:00 2001 From: Luca Pattocchio <15154851+Kasui92@users.noreply.github.com> Date: Mon, 7 Sep 2026 08:33:09 +0200 Subject: [PATCH 1/4] fix: derive the blockquote border from border-strong A dark palette applied without html.dark got a bar at the text lightness. --- packages/jaamd/src/styles/variables.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/jaamd/src/styles/variables.css b/packages/jaamd/src/styles/variables.css index 6c82dac..6c72ca7 100644 --- a/packages/jaamd/src/styles/variables.css +++ b/packages/jaamd/src/styles/variables.css @@ -109,7 +109,7 @@ /* ── Blockquote ─────────────────────────────────────────── */ --jaamd-blockquote-bg: var(--jaamd-surface-1); - --jaamd-blockquote-border: color-mix(in oklab, var(--jaamd-color-fg) 81%, var(--jaamd-bg)); + --jaamd-blockquote-border: var(--jaamd-border-strong); --jaamd-blockquote-fg: var(--jaamd-color-primary-light); @@ -184,7 +184,6 @@ html.dark { --jaamd-border-strong: color-mix(in oklab, var(--jaamd-color-fg) 36%, var(--jaamd-bg)); --jaamd-table-border: var(--jaamd-border); - --jaamd-blockquote-border: var(--jaamd-border-strong); --jaamd-copy-btn-hover-border: var(--jaamd-border-strong); --jaamd-alert-note-color: #58a6ff; From 7aef4429c3c13f4304baec95753af805aa38e69f Mon Sep 17 00:00:00 2001 From: Luca Pattocchio <15154851+Kasui92@users.noreply.github.com> Date: Mon, 7 Sep 2026 08:33:09 +0200 Subject: [PATCH 2/4] feat: generate every theme from a palette of fourteen colours --- .../jaamd/src/themes/catppuccin/index.css | 140 +++++++++++--- .../jaamd/src/themes/catppuccin/palette.js | 45 +++++ packages/jaamd/src/themes/dracula/dark.css | 86 ++++---- packages/jaamd/src/themes/dracula/index.css | 86 ++++---- packages/jaamd/src/themes/dracula/palette.js | 29 +++ packages/jaamd/src/themes/gruvbox/index.css | 142 +++++++++++--- packages/jaamd/src/themes/gruvbox/palette.js | 43 ++++ packages/jaamd/src/themes/nord/dark.css | 84 ++++---- packages/jaamd/src/themes/nord/index.css | 84 ++++---- packages/jaamd/src/themes/nord/palette.js | 23 +++ packages/jaamd/src/themes/one-dark/dark.css | 84 ++++---- packages/jaamd/src/themes/one-dark/index.css | 84 ++++---- packages/jaamd/src/themes/one-dark/palette.js | 32 +++ .../jaamd/src/themes/rose-pine-moon/index.css | 142 +++++++++++--- .../src/themes/rose-pine-moon/palette.js | 45 +++++ packages/jaamd/src/themes/rose-pine/index.css | 142 +++++++++++--- .../jaamd/src/themes/rose-pine/palette.js | 45 +++++ .../jaamd/src/themes/tokyo-night/dark.css | 73 +++++-- .../jaamd/src/themes/tokyo-night/index.css | 73 +++++-- .../jaamd/src/themes/tokyo-night/palette.js | 23 +++ scripts/build-themes.mjs | 183 +++++++++++++++--- 21 files changed, 1267 insertions(+), 421 deletions(-) create mode 100644 packages/jaamd/src/themes/catppuccin/palette.js create mode 100644 packages/jaamd/src/themes/dracula/palette.js create mode 100644 packages/jaamd/src/themes/gruvbox/palette.js create mode 100644 packages/jaamd/src/themes/nord/palette.js create mode 100644 packages/jaamd/src/themes/one-dark/palette.js create mode 100644 packages/jaamd/src/themes/rose-pine-moon/palette.js create mode 100644 packages/jaamd/src/themes/rose-pine/palette.js create mode 100644 packages/jaamd/src/themes/tokyo-night/palette.js diff --git a/packages/jaamd/src/themes/catppuccin/index.css b/packages/jaamd/src/themes/catppuccin/index.css index 5a5077b..fcfd33a 100644 --- a/packages/jaamd/src/themes/catppuccin/index.css +++ b/packages/jaamd/src/themes/catppuccin/index.css @@ -1,31 +1,121 @@ -/* JAAMD theme: Catppuccin. Latte in light, Mocha in dark. */ +/* JAAMD theme: Catppuccin. Pairs with Shiki theme "catppuccin-latte" and "catppuccin-mocha". */ :root { - --jaamd-bg: #eff1f5; - --jaamd-color-fg: #4c4f69; - --jaamd-color-fg-bright: #4c4f69; - --jaamd-color-primary: #1e66f5; - --jaamd-color-success: #40a02b; - --jaamd-alert-note-color: #1e66f5; - --jaamd-alert-tip-color: #40a02b; - --jaamd-alert-important-color: #1e66f5; - --jaamd-alert-warning-color: #df8e1d; - --jaamd-alert-caution-color: #d20f39; - - --jaamd-em-fg: #8839ef; + --jaamd-bg: #eff1f5; + --jaamd-color-fg: #4c4f69; + --jaamd-color-fg-bright: #4c4f69; + --jaamd-color-primary: #1e66f5; + --jaamd-color-primary-light: #7287fd; + --jaamd-color-success: #40a02b; + + --jaamd-heading-border-color: rgba(30, 102, 245, 0.3); + + --jaamd-code-bg: #ccd0da; + --jaamd-code-border: #9ca0b0; + --jaamd-code-fg: #4c4f69; + + --jaamd-pre-bg: #eff1f5; + --jaamd-pre-border: #ccd0da; + --jaamd-pre-fg: #4c4f69; + + --jaamd-copy-btn-bg: #ccd0da; + --jaamd-copy-btn-border: #9ca0b0; + --jaamd-copy-btn-fg: #4c4f69; + --jaamd-copy-btn-hover-bg: #9ca0b0; + --jaamd-copy-btn-hover-border:#1e66f5; + --jaamd-copy-btn-hover-fg: #4c4f69; + + --jaamd-blockquote-bg: #eff1f5; + --jaamd-blockquote-border: #9ca0b0; + --jaamd-blockquote-fg: #7287fd; + + --jaamd-em-fg: #8839ef; + --jaamd-hr-color: rgba(30, 102, 245, 0.3); + + --jaamd-table-border: #ccd0da; + --jaamd-table-header-bg: #eff1f5; + --jaamd-table-hover-bg: #ccd0da; + + --jaamd-tabs-border: #ccd0da; + --jaamd-tabs-header-bg: #e6e9ef; + --jaamd-tabs-btn-hover-bg: #ccd0da; + --jaamd-tabs-btn-active-bg: #eff1f5; + + --jaamd-details-bg: #eff1f5; + --jaamd-details-border: #ccd0da; + + --jaamd-spoiler-hidden-color: #4c4f69; + --jaamd-spoiler-revealed-bg: #ccd0da; + --jaamd-spoiler-revealed-fg: #4c4f69; + + --jaamd-alert-note-color: #1e66f5; + --jaamd-alert-note-bg: rgba(30, 102, 245, 0.1); + --jaamd-alert-tip-color: #40a02b; + --jaamd-alert-tip-bg: rgba(64, 160, 43, 0.1); + --jaamd-alert-important-color:#8839ef; + --jaamd-alert-important-bg: rgba(136, 57, 239, 0.1); + --jaamd-alert-warning-color: #df8e1d; + --jaamd-alert-warning-bg: rgba(223, 142, 29, 0.1); + --jaamd-alert-caution-color: #d20f39; + --jaamd-alert-caution-bg: rgba(210, 15, 57, 0.1); } html.dark { - --jaamd-bg: #1e1e2e; - --jaamd-color-fg: #cdd6f4; - --jaamd-color-fg-bright: #cdd6f4; - --jaamd-color-primary: #89b4fa; - --jaamd-color-success: #a6e3a1; - --jaamd-alert-note-color: #89b4fa; - --jaamd-alert-tip-color: #a6e3a1; - --jaamd-alert-important-color: #89b4fa; - --jaamd-alert-warning-color: #f9e2af; - --jaamd-alert-caution-color: #f38ba8; - - --jaamd-em-fg: #cba6f7; + --jaamd-bg: #1e1e2e; + --jaamd-color-fg: #cdd6f4; + --jaamd-color-fg-bright: #cdd6f4; + --jaamd-color-primary: #89b4fa; + --jaamd-color-primary-light: #b4befe; + --jaamd-color-success: #a6e3a1; + + --jaamd-heading-border-color: rgba(137, 180, 250, 0.3); + + --jaamd-code-bg: #313244; + --jaamd-code-border: #6c7086; + --jaamd-code-fg: #cdd6f4; + + --jaamd-pre-bg: #1e1e2e; + --jaamd-pre-border: #313244; + --jaamd-pre-fg: #cdd6f4; + + --jaamd-copy-btn-bg: #313244; + --jaamd-copy-btn-border: #6c7086; + --jaamd-copy-btn-fg: #cdd6f4; + --jaamd-copy-btn-hover-bg: #6c7086; + --jaamd-copy-btn-hover-border:#89b4fa; + --jaamd-copy-btn-hover-fg: #cdd6f4; + + --jaamd-blockquote-bg: #1e1e2e; + --jaamd-blockquote-border: #6c7086; + --jaamd-blockquote-fg: #b4befe; + + --jaamd-em-fg: #cba6f7; + --jaamd-hr-color: rgba(137, 180, 250, 0.3); + + --jaamd-table-border: #313244; + --jaamd-table-header-bg: #1e1e2e; + --jaamd-table-hover-bg: #313244; + + --jaamd-tabs-border: #313244; + --jaamd-tabs-header-bg: #181825; + --jaamd-tabs-btn-hover-bg: #313244; + --jaamd-tabs-btn-active-bg: #1e1e2e; + + --jaamd-details-bg: #1e1e2e; + --jaamd-details-border: #313244; + + --jaamd-spoiler-hidden-color: #cdd6f4; + --jaamd-spoiler-revealed-bg: #313244; + --jaamd-spoiler-revealed-fg: #cdd6f4; + + --jaamd-alert-note-color: #89b4fa; + --jaamd-alert-note-bg: rgba(137, 180, 250, 0.1); + --jaamd-alert-tip-color: #a6e3a1; + --jaamd-alert-tip-bg: rgba(166, 227, 161, 0.1); + --jaamd-alert-important-color:#cba6f7; + --jaamd-alert-important-bg: rgba(203, 166, 247, 0.1); + --jaamd-alert-warning-color: #f9e2af; + --jaamd-alert-warning-bg: rgba(249, 226, 175, 0.1); + --jaamd-alert-caution-color: #f38ba8; + --jaamd-alert-caution-bg: rgba(243, 139, 168, 0.1); } diff --git a/packages/jaamd/src/themes/catppuccin/palette.js b/packages/jaamd/src/themes/catppuccin/palette.js new file mode 100644 index 0000000..381f0a0 --- /dev/null +++ b/packages/jaamd/src/themes/catppuccin/palette.js @@ -0,0 +1,45 @@ +export default { + // Latte + light: { + recessed: "#e6e9ef", + base: "#eff1f5", + surface: "#ccd0da", + overlay: "#9ca0b0", + text: "#4c4f69", + bright: "#4c4f69", + + primary: "#1e66f5", + primaryLight: "#7287fd", + accent: "#8839ef", + + alert: { + note: "#1e66f5", + tip: "#40a02b", + important: "#8839ef", + warning: "#df8e1d", + caution: "#d20f39", + }, + }, + + // Mocha + dark: { + recessed: "#181825", + base: "#1e1e2e", + surface: "#313244", + overlay: "#6c7086", + text: "#cdd6f4", + bright: "#cdd6f4", + + primary: "#89b4fa", + primaryLight: "#b4befe", + accent: "#cba6f7", + + alert: { + note: "#89b4fa", + tip: "#a6e3a1", + important: "#cba6f7", + warning: "#f9e2af", + caution: "#f38ba8", + }, + }, +}; diff --git a/packages/jaamd/src/themes/dracula/dark.css b/packages/jaamd/src/themes/dracula/dark.css index 3eaf086..bb004f6 100644 --- a/packages/jaamd/src/themes/dracula/dark.css +++ b/packages/jaamd/src/themes/dracula/dark.css @@ -1,61 +1,61 @@ -/* JAAMD theme: Dracula (dark mode only). Pairs with Shiki theme "dracula" or "dracula-soft". */ +/* JAAMD theme: Dracula (dark mode only). Pairs with Shiki theme "dracula". */ html.dark { - --jaamd-bg: #282a36; - --jaamd-color-fg: #f8f8f2; - --jaamd-color-fg-bright: #ffffff; - --jaamd-color-primary: #bd93f9; - --jaamd-color-primary-light: #ff79c6; - --jaamd-color-success: #50fa7b; + --jaamd-bg: #282a36; + --jaamd-color-fg: #f8f8f2; + --jaamd-color-fg-bright: #ffffff; + --jaamd-color-primary: #bd93f9; + --jaamd-color-primary-light: #ff79c6; + --jaamd-color-success: #50fa7b; --jaamd-heading-border-color: rgba(189, 147, 249, 0.3); - --jaamd-code-bg: #44475a; - --jaamd-code-border: #6272a4; - --jaamd-code-fg: #f8f8f2; + --jaamd-code-bg: #44475a; + --jaamd-code-border: #6272a4; + --jaamd-code-fg: #f8f8f2; - --jaamd-pre-bg: #282a36; - --jaamd-pre-border: #44475a; - --jaamd-pre-fg: #f8f8f2; + --jaamd-pre-bg: #282a36; + --jaamd-pre-border: #44475a; + --jaamd-pre-fg: #f8f8f2; - --jaamd-copy-btn-bg: #44475a; - --jaamd-copy-btn-border: #6272a4; - --jaamd-copy-btn-fg: #f8f8f2; - --jaamd-copy-btn-hover-bg: #6272a4; - --jaamd-copy-btn-hover-border: #bd93f9; - --jaamd-copy-btn-hover-fg: #ffffff; + --jaamd-copy-btn-bg: #44475a; + --jaamd-copy-btn-border: #6272a4; + --jaamd-copy-btn-fg: #f8f8f2; + --jaamd-copy-btn-hover-bg: #6272a4; + --jaamd-copy-btn-hover-border:#bd93f9; + --jaamd-copy-btn-hover-fg: #ffffff; - --jaamd-blockquote-bg: #282a36; - --jaamd-blockquote-border: #6272a4; - --jaamd-blockquote-fg: #6272a4; + --jaamd-blockquote-bg: #282a36; + --jaamd-blockquote-border: #6272a4; + --jaamd-blockquote-fg: #6272a4; - --jaamd-em-fg: #8be9fd; - --jaamd-hr-color: rgba(189, 147, 249, 0.3); + --jaamd-em-fg: #8be9fd; + --jaamd-hr-color: rgba(189, 147, 249, 0.3); - --jaamd-table-border: #44475a; - --jaamd-table-header-bg: #282a36; - --jaamd-table-hover-bg: #44475a; + --jaamd-table-border: #44475a; + --jaamd-table-header-bg: #282a36; + --jaamd-table-hover-bg: #44475a; - --jaamd-tabs-border: #44475a; - --jaamd-tabs-header-bg: #21222c; - --jaamd-tabs-btn-hover-bg: #44475a; - --jaamd-tabs-btn-active-bg: #282a36; + --jaamd-tabs-border: #44475a; + --jaamd-tabs-header-bg: #21222c; + --jaamd-tabs-btn-hover-bg: #44475a; + --jaamd-tabs-btn-active-bg: #282a36; - --jaamd-details-bg: #282a36; - --jaamd-details-border: #44475a; + --jaamd-details-bg: #282a36; + --jaamd-details-border: #44475a; --jaamd-spoiler-hidden-color: #f8f8f2; --jaamd-spoiler-revealed-bg: #44475a; --jaamd-spoiler-revealed-fg: #f8f8f2; - --jaamd-alert-note-color: #8be9fd; - --jaamd-alert-note-bg: rgba(139, 233, 253, 0.1); - --jaamd-alert-tip-color: #50fa7b; - --jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1); - --jaamd-alert-important-color: #bd93f9; - --jaamd-alert-important-bg: rgba(189, 147, 249, 0.1); - --jaamd-alert-warning-color: #f1fa8c; - --jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1); - --jaamd-alert-caution-color: #ff5555; - --jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1); + --jaamd-alert-note-color: #8be9fd; + --jaamd-alert-note-bg: rgba(139, 233, 253, 0.1); + --jaamd-alert-tip-color: #50fa7b; + --jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1); + --jaamd-alert-important-color:#bd93f9; + --jaamd-alert-important-bg: rgba(189, 147, 249, 0.1); + --jaamd-alert-warning-color: #f1fa8c; + --jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1); + --jaamd-alert-caution-color: #ff5555; + --jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1); } diff --git a/packages/jaamd/src/themes/dracula/index.css b/packages/jaamd/src/themes/dracula/index.css index fe70e04..294d0d0 100644 --- a/packages/jaamd/src/themes/dracula/index.css +++ b/packages/jaamd/src/themes/dracula/index.css @@ -1,61 +1,61 @@ -/* JAAMD theme: Dracula. Pairs with Shiki theme "dracula" or "dracula-soft". */ +/* JAAMD theme: Dracula. Pairs with Shiki theme "dracula". */ :root { - --jaamd-bg: #282a36; - --jaamd-color-fg: #f8f8f2; - --jaamd-color-fg-bright: #ffffff; - --jaamd-color-primary: #bd93f9; - --jaamd-color-primary-light: #ff79c6; - --jaamd-color-success: #50fa7b; + --jaamd-bg: #282a36; + --jaamd-color-fg: #f8f8f2; + --jaamd-color-fg-bright: #ffffff; + --jaamd-color-primary: #bd93f9; + --jaamd-color-primary-light: #ff79c6; + --jaamd-color-success: #50fa7b; --jaamd-heading-border-color: rgba(189, 147, 249, 0.3); - --jaamd-code-bg: #44475a; - --jaamd-code-border: #6272a4; - --jaamd-code-fg: #f8f8f2; + --jaamd-code-bg: #44475a; + --jaamd-code-border: #6272a4; + --jaamd-code-fg: #f8f8f2; - --jaamd-pre-bg: #282a36; - --jaamd-pre-border: #44475a; - --jaamd-pre-fg: #f8f8f2; + --jaamd-pre-bg: #282a36; + --jaamd-pre-border: #44475a; + --jaamd-pre-fg: #f8f8f2; - --jaamd-copy-btn-bg: #44475a; - --jaamd-copy-btn-border: #6272a4; - --jaamd-copy-btn-fg: #f8f8f2; - --jaamd-copy-btn-hover-bg: #6272a4; - --jaamd-copy-btn-hover-border: #bd93f9; - --jaamd-copy-btn-hover-fg: #ffffff; + --jaamd-copy-btn-bg: #44475a; + --jaamd-copy-btn-border: #6272a4; + --jaamd-copy-btn-fg: #f8f8f2; + --jaamd-copy-btn-hover-bg: #6272a4; + --jaamd-copy-btn-hover-border:#bd93f9; + --jaamd-copy-btn-hover-fg: #ffffff; - --jaamd-blockquote-bg: #282a36; - --jaamd-blockquote-border: #6272a4; - --jaamd-blockquote-fg: #6272a4; + --jaamd-blockquote-bg: #282a36; + --jaamd-blockquote-border: #6272a4; + --jaamd-blockquote-fg: #6272a4; - --jaamd-em-fg: #8be9fd; - --jaamd-hr-color: rgba(189, 147, 249, 0.3); + --jaamd-em-fg: #8be9fd; + --jaamd-hr-color: rgba(189, 147, 249, 0.3); - --jaamd-table-border: #44475a; - --jaamd-table-header-bg: #282a36; - --jaamd-table-hover-bg: #44475a; + --jaamd-table-border: #44475a; + --jaamd-table-header-bg: #282a36; + --jaamd-table-hover-bg: #44475a; - --jaamd-tabs-border: #44475a; - --jaamd-tabs-header-bg: #21222c; - --jaamd-tabs-btn-hover-bg: #44475a; - --jaamd-tabs-btn-active-bg: #282a36; + --jaamd-tabs-border: #44475a; + --jaamd-tabs-header-bg: #21222c; + --jaamd-tabs-btn-hover-bg: #44475a; + --jaamd-tabs-btn-active-bg: #282a36; - --jaamd-details-bg: #282a36; - --jaamd-details-border: #44475a; + --jaamd-details-bg: #282a36; + --jaamd-details-border: #44475a; --jaamd-spoiler-hidden-color: #f8f8f2; --jaamd-spoiler-revealed-bg: #44475a; --jaamd-spoiler-revealed-fg: #f8f8f2; - --jaamd-alert-note-color: #8be9fd; - --jaamd-alert-note-bg: rgba(139, 233, 253, 0.1); - --jaamd-alert-tip-color: #50fa7b; - --jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1); - --jaamd-alert-important-color: #bd93f9; - --jaamd-alert-important-bg: rgba(189, 147, 249, 0.1); - --jaamd-alert-warning-color: #f1fa8c; - --jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1); - --jaamd-alert-caution-color: #ff5555; - --jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1); + --jaamd-alert-note-color: #8be9fd; + --jaamd-alert-note-bg: rgba(139, 233, 253, 0.1); + --jaamd-alert-tip-color: #50fa7b; + --jaamd-alert-tip-bg: rgba(80, 250, 123, 0.1); + --jaamd-alert-important-color:#bd93f9; + --jaamd-alert-important-bg: rgba(189, 147, 249, 0.1); + --jaamd-alert-warning-color: #f1fa8c; + --jaamd-alert-warning-bg: rgba(241, 250, 140, 0.1); + --jaamd-alert-caution-color: #ff5555; + --jaamd-alert-caution-bg: rgba(255, 85, 85, 0.1); } diff --git a/packages/jaamd/src/themes/dracula/palette.js b/packages/jaamd/src/themes/dracula/palette.js new file mode 100644 index 0000000..3c62b38 --- /dev/null +++ b/packages/jaamd/src/themes/dracula/palette.js @@ -0,0 +1,29 @@ +export default { + light: null, + dark: { + recessed: "#21222c", + base: "#282a36", + surface: "#44475a", + overlay: "#6272a4", + text: "#f8f8f2", + bright: "#ffffff", + + primary: "#bd93f9", + primaryLight: "#ff79c6", + accent: "#8be9fd", + + alert: { + note: "#8be9fd", + tip: "#50fa7b", + important: "#bd93f9", + warning: "#f1fa8c", + caution: "#ff5555", + }, + + overrides: { + "code-fg": "#f8f8f2", + "spoiler-hidden-color": "#f8f8f2", + "blockquote-fg": "#6272a4", + }, + }, +}; diff --git a/packages/jaamd/src/themes/gruvbox/index.css b/packages/jaamd/src/themes/gruvbox/index.css index d863a2a..2b19245 100644 --- a/packages/jaamd/src/themes/gruvbox/index.css +++ b/packages/jaamd/src/themes/gruvbox/index.css @@ -1,33 +1,121 @@ -/* JAAMD theme: Gruvbox. Light and dark, following the toggle. */ +/* JAAMD theme: Gruvbox. Pairs with Shiki theme "gruvbox-light-medium" and "gruvbox-dark-medium". */ :root { - --jaamd-bg: #fbf1c7; - --jaamd-color-fg: #3c3836; - --jaamd-color-fg-bright: #282828; - --jaamd-color-primary: #458588; - --jaamd-color-success: #98971a; - --jaamd-alert-note-color: #458588; - --jaamd-alert-tip-color: #98971a; - --jaamd-alert-important-color: #458588; - --jaamd-alert-warning-color: #d79921; - --jaamd-alert-caution-color: #cc241d; - - --jaamd-border-strong: #d5c4a1; - --jaamd-em-fg: #b16286; + --jaamd-bg: #fbf1c7; + --jaamd-color-fg: #3c3836; + --jaamd-color-fg-bright: #282828; + --jaamd-color-primary: #458588; + --jaamd-color-primary-light: #689d6a; + --jaamd-color-success: #98971a; + + --jaamd-heading-border-color: rgba(69, 133, 136, 0.3); + + --jaamd-code-bg: #ebdbb2; + --jaamd-code-border: #d5c4a1; + --jaamd-code-fg: #282828; + + --jaamd-pre-bg: #fbf1c7; + --jaamd-pre-border: #ebdbb2; + --jaamd-pre-fg: #3c3836; + + --jaamd-copy-btn-bg: #ebdbb2; + --jaamd-copy-btn-border: #d5c4a1; + --jaamd-copy-btn-fg: #3c3836; + --jaamd-copy-btn-hover-bg: #d5c4a1; + --jaamd-copy-btn-hover-border:#458588; + --jaamd-copy-btn-hover-fg: #282828; + + --jaamd-blockquote-bg: #fbf1c7; + --jaamd-blockquote-border: #d5c4a1; + --jaamd-blockquote-fg: #689d6a; + + --jaamd-em-fg: #b16286; + --jaamd-hr-color: rgba(69, 133, 136, 0.3); + + --jaamd-table-border: #ebdbb2; + --jaamd-table-header-bg: #fbf1c7; + --jaamd-table-hover-bg: #ebdbb2; + + --jaamd-tabs-border: #ebdbb2; + --jaamd-tabs-header-bg: #f9f5d7; + --jaamd-tabs-btn-hover-bg: #ebdbb2; + --jaamd-tabs-btn-active-bg: #fbf1c7; + + --jaamd-details-bg: #fbf1c7; + --jaamd-details-border: #ebdbb2; + + --jaamd-spoiler-hidden-color: #282828; + --jaamd-spoiler-revealed-bg: #ebdbb2; + --jaamd-spoiler-revealed-fg: #3c3836; + + --jaamd-alert-note-color: #458588; + --jaamd-alert-note-bg: rgba(69, 133, 136, 0.1); + --jaamd-alert-tip-color: #98971a; + --jaamd-alert-tip-bg: rgba(152, 151, 26, 0.1); + --jaamd-alert-important-color:#b16286; + --jaamd-alert-important-bg: rgba(177, 98, 134, 0.1); + --jaamd-alert-warning-color: #d79921; + --jaamd-alert-warning-bg: rgba(215, 153, 33, 0.1); + --jaamd-alert-caution-color: #cc241d; + --jaamd-alert-caution-bg: rgba(204, 36, 29, 0.1); } html.dark { - --jaamd-bg: #282828; - --jaamd-color-fg: #ebdbb2; - --jaamd-color-fg-bright: #fbf1c7; - --jaamd-color-primary: #83a598; - --jaamd-color-success: #b8bb26; - --jaamd-alert-note-color: #83a598; - --jaamd-alert-tip-color: #b8bb26; - --jaamd-alert-important-color: #83a598; - --jaamd-alert-warning-color: #fabd2f; - --jaamd-alert-caution-color: #fb4934; - - --jaamd-border-strong: #665c54; - --jaamd-em-fg: #d3869b; + --jaamd-bg: #282828; + --jaamd-color-fg: #ebdbb2; + --jaamd-color-fg-bright: #fbf1c7; + --jaamd-color-primary: #83a598; + --jaamd-color-primary-light: #8ec07c; + --jaamd-color-success: #b8bb26; + + --jaamd-heading-border-color: rgba(131, 165, 152, 0.3); + + --jaamd-code-bg: #3c3836; + --jaamd-code-border: #504945; + --jaamd-code-fg: #fbf1c7; + + --jaamd-pre-bg: #282828; + --jaamd-pre-border: #3c3836; + --jaamd-pre-fg: #ebdbb2; + + --jaamd-copy-btn-bg: #3c3836; + --jaamd-copy-btn-border: #504945; + --jaamd-copy-btn-fg: #ebdbb2; + --jaamd-copy-btn-hover-bg: #504945; + --jaamd-copy-btn-hover-border:#83a598; + --jaamd-copy-btn-hover-fg: #fbf1c7; + + --jaamd-blockquote-bg: #282828; + --jaamd-blockquote-border: #504945; + --jaamd-blockquote-fg: #8ec07c; + + --jaamd-em-fg: #d3869b; + --jaamd-hr-color: rgba(131, 165, 152, 0.3); + + --jaamd-table-border: #3c3836; + --jaamd-table-header-bg: #282828; + --jaamd-table-hover-bg: #3c3836; + + --jaamd-tabs-border: #3c3836; + --jaamd-tabs-header-bg: #1d2021; + --jaamd-tabs-btn-hover-bg: #3c3836; + --jaamd-tabs-btn-active-bg: #282828; + + --jaamd-details-bg: #282828; + --jaamd-details-border: #3c3836; + + --jaamd-spoiler-hidden-color: #fbf1c7; + --jaamd-spoiler-revealed-bg: #3c3836; + --jaamd-spoiler-revealed-fg: #ebdbb2; + + --jaamd-alert-note-color: #83a598; + --jaamd-alert-note-bg: rgba(131, 165, 152, 0.1); + --jaamd-alert-tip-color: #b8bb26; + --jaamd-alert-tip-bg: rgba(184, 187, 38, 0.1); + --jaamd-alert-important-color:#d3869b; + --jaamd-alert-important-bg: rgba(211, 134, 155, 0.1); + --jaamd-alert-warning-color: #fabd2f; + --jaamd-alert-warning-bg: rgba(250, 189, 47, 0.1); + --jaamd-alert-caution-color: #fb4934; + --jaamd-alert-caution-bg: rgba(251, 73, 52, 0.1); } diff --git a/packages/jaamd/src/themes/gruvbox/palette.js b/packages/jaamd/src/themes/gruvbox/palette.js new file mode 100644 index 0000000..4f12b46 --- /dev/null +++ b/packages/jaamd/src/themes/gruvbox/palette.js @@ -0,0 +1,43 @@ +export default { + light: { + recessed: "#f9f5d7", + base: "#fbf1c7", + surface: "#ebdbb2", + overlay: "#d5c4a1", + text: "#3c3836", + bright: "#282828", + + primary: "#458588", + primaryLight: "#689d6a", + accent: "#b16286", + + alert: { + note: "#458588", + tip: "#98971a", + important: "#b16286", + warning: "#d79921", + caution: "#cc241d", + }, + }, + + dark: { + recessed: "#1d2021", + base: "#282828", + surface: "#3c3836", + overlay: "#504945", + text: "#ebdbb2", + bright: "#fbf1c7", + + primary: "#83a598", + primaryLight: "#8ec07c", + accent: "#d3869b", + + alert: { + note: "#83a598", + tip: "#b8bb26", + important: "#d3869b", + warning: "#fabd2f", + caution: "#fb4934", + }, + }, +}; diff --git a/packages/jaamd/src/themes/nord/dark.css b/packages/jaamd/src/themes/nord/dark.css index 3f6bd38..cc71f84 100644 --- a/packages/jaamd/src/themes/nord/dark.css +++ b/packages/jaamd/src/themes/nord/dark.css @@ -1,61 +1,61 @@ /* JAAMD theme: Nord (dark mode only). Pairs with Shiki theme "nord". */ html.dark { - --jaamd-bg: #2e3440; - --jaamd-color-fg: #d8dee9; - --jaamd-color-fg-bright: #eceff4; - --jaamd-color-primary: #88c0d0; - --jaamd-color-primary-light: #81a1c1; - --jaamd-color-success: #a3be8c; + --jaamd-bg: #2e3440; + --jaamd-color-fg: #d8dee9; + --jaamd-color-fg-bright: #eceff4; + --jaamd-color-primary: #88c0d0; + --jaamd-color-primary-light: #81a1c1; + --jaamd-color-success: #a3be8c; --jaamd-heading-border-color: rgba(136, 192, 208, 0.3); - --jaamd-code-bg: #3b4252; - --jaamd-code-border: #4c566a; - --jaamd-code-fg: #eceff4; + --jaamd-code-bg: #3b4252; + --jaamd-code-border: #4c566a; + --jaamd-code-fg: #eceff4; - --jaamd-pre-bg: #2e3440; - --jaamd-pre-border: #3b4252; - --jaamd-pre-fg: #d8dee9; + --jaamd-pre-bg: #2e3440; + --jaamd-pre-border: #3b4252; + --jaamd-pre-fg: #d8dee9; - --jaamd-copy-btn-bg: #3b4252; - --jaamd-copy-btn-border: #4c566a; - --jaamd-copy-btn-fg: #d8dee9; - --jaamd-copy-btn-hover-bg: #4c566a; - --jaamd-copy-btn-hover-border: #88c0d0; - --jaamd-copy-btn-hover-fg: #eceff4; + --jaamd-copy-btn-bg: #3b4252; + --jaamd-copy-btn-border: #4c566a; + --jaamd-copy-btn-fg: #d8dee9; + --jaamd-copy-btn-hover-bg: #4c566a; + --jaamd-copy-btn-hover-border:#88c0d0; + --jaamd-copy-btn-hover-fg: #eceff4; - --jaamd-blockquote-bg: #2e3440; - --jaamd-blockquote-border: #4c566a; - --jaamd-blockquote-fg: #81a1c1; + --jaamd-blockquote-bg: #2e3440; + --jaamd-blockquote-border: #4c566a; + --jaamd-blockquote-fg: #81a1c1; - --jaamd-em-fg: #88c0d0; - --jaamd-hr-color: rgba(136, 192, 208, 0.3); + --jaamd-em-fg: #88c0d0; + --jaamd-hr-color: rgba(136, 192, 208, 0.3); - --jaamd-table-border: #3b4252; - --jaamd-table-header-bg: #2e3440; - --jaamd-table-hover-bg: #3b4252; + --jaamd-table-border: #3b4252; + --jaamd-table-header-bg: #2e3440; + --jaamd-table-hover-bg: #3b4252; - --jaamd-tabs-border: #3b4252; - --jaamd-tabs-header-bg: #2e3440; - --jaamd-tabs-btn-hover-bg: #3b4252; - --jaamd-tabs-btn-active-bg: #2e3440; + --jaamd-tabs-border: #3b4252; + --jaamd-tabs-header-bg: #2e3440; + --jaamd-tabs-btn-hover-bg: #3b4252; + --jaamd-tabs-btn-active-bg: #2e3440; - --jaamd-details-bg: #2e3440; - --jaamd-details-border: #3b4252; + --jaamd-details-bg: #2e3440; + --jaamd-details-border: #3b4252; --jaamd-spoiler-hidden-color: #eceff4; --jaamd-spoiler-revealed-bg: #3b4252; --jaamd-spoiler-revealed-fg: #d8dee9; - --jaamd-alert-note-color: #81a1c1; - --jaamd-alert-note-bg: rgba(129, 161, 193, 0.1); - --jaamd-alert-tip-color: #a3be8c; - --jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1); - --jaamd-alert-important-color: #b48ead; - --jaamd-alert-important-bg: rgba(180, 142, 173, 0.1); - --jaamd-alert-warning-color: #ebcb8b; - --jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1); - --jaamd-alert-caution-color: #bf616a; - --jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1); + --jaamd-alert-note-color: #81a1c1; + --jaamd-alert-note-bg: rgba(129, 161, 193, 0.1); + --jaamd-alert-tip-color: #a3be8c; + --jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1); + --jaamd-alert-important-color:#b48ead; + --jaamd-alert-important-bg: rgba(180, 142, 173, 0.1); + --jaamd-alert-warning-color: #ebcb8b; + --jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1); + --jaamd-alert-caution-color: #bf616a; + --jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1); } diff --git a/packages/jaamd/src/themes/nord/index.css b/packages/jaamd/src/themes/nord/index.css index 1d3c19c..4b476e5 100644 --- a/packages/jaamd/src/themes/nord/index.css +++ b/packages/jaamd/src/themes/nord/index.css @@ -1,61 +1,61 @@ /* JAAMD theme: Nord. Pairs with Shiki theme "nord". */ :root { - --jaamd-bg: #2e3440; - --jaamd-color-fg: #d8dee9; - --jaamd-color-fg-bright: #eceff4; - --jaamd-color-primary: #88c0d0; - --jaamd-color-primary-light: #81a1c1; - --jaamd-color-success: #a3be8c; + --jaamd-bg: #2e3440; + --jaamd-color-fg: #d8dee9; + --jaamd-color-fg-bright: #eceff4; + --jaamd-color-primary: #88c0d0; + --jaamd-color-primary-light: #81a1c1; + --jaamd-color-success: #a3be8c; --jaamd-heading-border-color: rgba(136, 192, 208, 0.3); - --jaamd-code-bg: #3b4252; - --jaamd-code-border: #4c566a; - --jaamd-code-fg: #eceff4; + --jaamd-code-bg: #3b4252; + --jaamd-code-border: #4c566a; + --jaamd-code-fg: #eceff4; - --jaamd-pre-bg: #2e3440; - --jaamd-pre-border: #3b4252; - --jaamd-pre-fg: #d8dee9; + --jaamd-pre-bg: #2e3440; + --jaamd-pre-border: #3b4252; + --jaamd-pre-fg: #d8dee9; - --jaamd-copy-btn-bg: #3b4252; - --jaamd-copy-btn-border: #4c566a; - --jaamd-copy-btn-fg: #d8dee9; - --jaamd-copy-btn-hover-bg: #4c566a; - --jaamd-copy-btn-hover-border: #88c0d0; - --jaamd-copy-btn-hover-fg: #eceff4; + --jaamd-copy-btn-bg: #3b4252; + --jaamd-copy-btn-border: #4c566a; + --jaamd-copy-btn-fg: #d8dee9; + --jaamd-copy-btn-hover-bg: #4c566a; + --jaamd-copy-btn-hover-border:#88c0d0; + --jaamd-copy-btn-hover-fg: #eceff4; - --jaamd-blockquote-bg: #2e3440; - --jaamd-blockquote-border: #4c566a; - --jaamd-blockquote-fg: #81a1c1; + --jaamd-blockquote-bg: #2e3440; + --jaamd-blockquote-border: #4c566a; + --jaamd-blockquote-fg: #81a1c1; - --jaamd-em-fg: #88c0d0; - --jaamd-hr-color: rgba(136, 192, 208, 0.3); + --jaamd-em-fg: #88c0d0; + --jaamd-hr-color: rgba(136, 192, 208, 0.3); - --jaamd-table-border: #3b4252; - --jaamd-table-header-bg: #2e3440; - --jaamd-table-hover-bg: #3b4252; + --jaamd-table-border: #3b4252; + --jaamd-table-header-bg: #2e3440; + --jaamd-table-hover-bg: #3b4252; - --jaamd-tabs-border: #3b4252; - --jaamd-tabs-header-bg: #2e3440; - --jaamd-tabs-btn-hover-bg: #3b4252; - --jaamd-tabs-btn-active-bg: #2e3440; + --jaamd-tabs-border: #3b4252; + --jaamd-tabs-header-bg: #2e3440; + --jaamd-tabs-btn-hover-bg: #3b4252; + --jaamd-tabs-btn-active-bg: #2e3440; - --jaamd-details-bg: #2e3440; - --jaamd-details-border: #3b4252; + --jaamd-details-bg: #2e3440; + --jaamd-details-border: #3b4252; --jaamd-spoiler-hidden-color: #eceff4; --jaamd-spoiler-revealed-bg: #3b4252; --jaamd-spoiler-revealed-fg: #d8dee9; - --jaamd-alert-note-color: #81a1c1; - --jaamd-alert-note-bg: rgba(129, 161, 193, 0.1); - --jaamd-alert-tip-color: #a3be8c; - --jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1); - --jaamd-alert-important-color: #b48ead; - --jaamd-alert-important-bg: rgba(180, 142, 173, 0.1); - --jaamd-alert-warning-color: #ebcb8b; - --jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1); - --jaamd-alert-caution-color: #bf616a; - --jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1); + --jaamd-alert-note-color: #81a1c1; + --jaamd-alert-note-bg: rgba(129, 161, 193, 0.1); + --jaamd-alert-tip-color: #a3be8c; + --jaamd-alert-tip-bg: rgba(163, 190, 140, 0.1); + --jaamd-alert-important-color:#b48ead; + --jaamd-alert-important-bg: rgba(180, 142, 173, 0.1); + --jaamd-alert-warning-color: #ebcb8b; + --jaamd-alert-warning-bg: rgba(235, 203, 139, 0.1); + --jaamd-alert-caution-color: #bf616a; + --jaamd-alert-caution-bg: rgba(191, 97, 106, 0.1); } diff --git a/packages/jaamd/src/themes/nord/palette.js b/packages/jaamd/src/themes/nord/palette.js new file mode 100644 index 0000000..a133f41 --- /dev/null +++ b/packages/jaamd/src/themes/nord/palette.js @@ -0,0 +1,23 @@ +export default { + light: null, + dark: { + recessed: "#2e3440", + base: "#2e3440", + surface: "#3b4252", + overlay: "#4c566a", + text: "#d8dee9", + bright: "#eceff4", + + primary: "#88c0d0", + primaryLight: "#81a1c1", + accent: "#88c0d0", + + alert: { + note: "#81a1c1", + tip: "#a3be8c", + important: "#b48ead", + warning: "#ebcb8b", + caution: "#bf616a", + }, + }, +}; diff --git a/packages/jaamd/src/themes/one-dark/dark.css b/packages/jaamd/src/themes/one-dark/dark.css index eb1df09..7d736f9 100644 --- a/packages/jaamd/src/themes/one-dark/dark.css +++ b/packages/jaamd/src/themes/one-dark/dark.css @@ -1,61 +1,61 @@ /* JAAMD theme: One Dark (dark mode only). Pairs with Shiki theme "one-dark-pro". */ html.dark { - --jaamd-bg: #282c34; - --jaamd-color-fg: #abb2bf; - --jaamd-color-fg-bright: #e6e6e6; - --jaamd-color-primary: #61afef; - --jaamd-color-primary-light: #56b6c2; - --jaamd-color-success: #98c379; + --jaamd-bg: #282c34; + --jaamd-color-fg: #abb2bf; + --jaamd-color-fg-bright: #e6e6e6; + --jaamd-color-primary: #61afef; + --jaamd-color-primary-light: #56b6c2; + --jaamd-color-success: #98c379; --jaamd-heading-border-color: rgba(97, 175, 239, 0.3); - --jaamd-code-bg: #2c313c; - --jaamd-code-border: #3e4451; - --jaamd-code-fg: #e6e6e6; + --jaamd-code-bg: #2c313c; + --jaamd-code-border: #3e4451; + --jaamd-code-fg: #e6e6e6; - --jaamd-pre-bg: #282c34; - --jaamd-pre-border: #2c313c; - --jaamd-pre-fg: #abb2bf; + --jaamd-pre-bg: #282c34; + --jaamd-pre-border: #2c313c; + --jaamd-pre-fg: #abb2bf; - --jaamd-copy-btn-bg: #2c313c; - --jaamd-copy-btn-border: #3e4451; - --jaamd-copy-btn-fg: #abb2bf; - --jaamd-copy-btn-hover-bg: #3e4451; - --jaamd-copy-btn-hover-border: #61afef; - --jaamd-copy-btn-hover-fg: #e6e6e6; + --jaamd-copy-btn-bg: #2c313c; + --jaamd-copy-btn-border: #3e4451; + --jaamd-copy-btn-fg: #abb2bf; + --jaamd-copy-btn-hover-bg: #3e4451; + --jaamd-copy-btn-hover-border:#61afef; + --jaamd-copy-btn-hover-fg: #e6e6e6; - --jaamd-blockquote-bg: #2c313c; - --jaamd-blockquote-border: #3e4451; - --jaamd-blockquote-fg: #5c6370; + --jaamd-blockquote-bg: #2c313c; + --jaamd-blockquote-border: #3e4451; + --jaamd-blockquote-fg: #5c6370; - --jaamd-em-fg: #c678dd; - --jaamd-hr-color: rgba(97, 175, 239, 0.3); + --jaamd-em-fg: #c678dd; + --jaamd-hr-color: rgba(97, 175, 239, 0.3); - --jaamd-table-border: #2c313c; - --jaamd-table-header-bg: #21252b; - --jaamd-table-hover-bg: #2c313c; + --jaamd-table-border: #2c313c; + --jaamd-table-header-bg: #21252b; + --jaamd-table-hover-bg: #2c313c; - --jaamd-tabs-border: #2c313c; - --jaamd-tabs-header-bg: #21252b; - --jaamd-tabs-btn-hover-bg: #2c313c; - --jaamd-tabs-btn-active-bg: #282c34; + --jaamd-tabs-border: #2c313c; + --jaamd-tabs-header-bg: #21252b; + --jaamd-tabs-btn-hover-bg: #2c313c; + --jaamd-tabs-btn-active-bg: #282c34; - --jaamd-details-bg: #2c313c; - --jaamd-details-border: #3e4451; + --jaamd-details-bg: #2c313c; + --jaamd-details-border: #3e4451; --jaamd-spoiler-hidden-color: #e6e6e6; --jaamd-spoiler-revealed-bg: #2c313c; --jaamd-spoiler-revealed-fg: #abb2bf; - --jaamd-alert-note-color: #61afef; - --jaamd-alert-note-bg: rgba(97, 175, 239, 0.1); - --jaamd-alert-tip-color: #98c379; - --jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1); - --jaamd-alert-important-color: #c678dd; - --jaamd-alert-important-bg: rgba(198, 120, 221, 0.1); - --jaamd-alert-warning-color: #e5c07b; - --jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1); - --jaamd-alert-caution-color: #e06c75; - --jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1); + --jaamd-alert-note-color: #61afef; + --jaamd-alert-note-bg: rgba(97, 175, 239, 0.1); + --jaamd-alert-tip-color: #98c379; + --jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1); + --jaamd-alert-important-color:#c678dd; + --jaamd-alert-important-bg: rgba(198, 120, 221, 0.1); + --jaamd-alert-warning-color: #e5c07b; + --jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1); + --jaamd-alert-caution-color: #e06c75; + --jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1); } diff --git a/packages/jaamd/src/themes/one-dark/index.css b/packages/jaamd/src/themes/one-dark/index.css index e8d705e..605664c 100644 --- a/packages/jaamd/src/themes/one-dark/index.css +++ b/packages/jaamd/src/themes/one-dark/index.css @@ -1,61 +1,61 @@ /* JAAMD theme: One Dark. Pairs with Shiki theme "one-dark-pro". */ :root { - --jaamd-bg: #282c34; - --jaamd-color-fg: #abb2bf; - --jaamd-color-fg-bright: #e6e6e6; - --jaamd-color-primary: #61afef; - --jaamd-color-primary-light: #56b6c2; - --jaamd-color-success: #98c379; + --jaamd-bg: #282c34; + --jaamd-color-fg: #abb2bf; + --jaamd-color-fg-bright: #e6e6e6; + --jaamd-color-primary: #61afef; + --jaamd-color-primary-light: #56b6c2; + --jaamd-color-success: #98c379; --jaamd-heading-border-color: rgba(97, 175, 239, 0.3); - --jaamd-code-bg: #2c313c; - --jaamd-code-border: #3e4451; - --jaamd-code-fg: #e6e6e6; + --jaamd-code-bg: #2c313c; + --jaamd-code-border: #3e4451; + --jaamd-code-fg: #e6e6e6; - --jaamd-pre-bg: #282c34; - --jaamd-pre-border: #2c313c; - --jaamd-pre-fg: #abb2bf; + --jaamd-pre-bg: #282c34; + --jaamd-pre-border: #2c313c; + --jaamd-pre-fg: #abb2bf; - --jaamd-copy-btn-bg: #2c313c; - --jaamd-copy-btn-border: #3e4451; - --jaamd-copy-btn-fg: #abb2bf; - --jaamd-copy-btn-hover-bg: #3e4451; - --jaamd-copy-btn-hover-border: #61afef; - --jaamd-copy-btn-hover-fg: #e6e6e6; + --jaamd-copy-btn-bg: #2c313c; + --jaamd-copy-btn-border: #3e4451; + --jaamd-copy-btn-fg: #abb2bf; + --jaamd-copy-btn-hover-bg: #3e4451; + --jaamd-copy-btn-hover-border:#61afef; + --jaamd-copy-btn-hover-fg: #e6e6e6; - --jaamd-blockquote-bg: #2c313c; - --jaamd-blockquote-border: #3e4451; - --jaamd-blockquote-fg: #5c6370; + --jaamd-blockquote-bg: #2c313c; + --jaamd-blockquote-border: #3e4451; + --jaamd-blockquote-fg: #5c6370; - --jaamd-em-fg: #c678dd; - --jaamd-hr-color: rgba(97, 175, 239, 0.3); + --jaamd-em-fg: #c678dd; + --jaamd-hr-color: rgba(97, 175, 239, 0.3); - --jaamd-table-border: #2c313c; - --jaamd-table-header-bg: #21252b; - --jaamd-table-hover-bg: #2c313c; + --jaamd-table-border: #2c313c; + --jaamd-table-header-bg: #21252b; + --jaamd-table-hover-bg: #2c313c; - --jaamd-tabs-border: #2c313c; - --jaamd-tabs-header-bg: #21252b; - --jaamd-tabs-btn-hover-bg: #2c313c; - --jaamd-tabs-btn-active-bg: #282c34; + --jaamd-tabs-border: #2c313c; + --jaamd-tabs-header-bg: #21252b; + --jaamd-tabs-btn-hover-bg: #2c313c; + --jaamd-tabs-btn-active-bg: #282c34; - --jaamd-details-bg: #2c313c; - --jaamd-details-border: #3e4451; + --jaamd-details-bg: #2c313c; + --jaamd-details-border: #3e4451; --jaamd-spoiler-hidden-color: #e6e6e6; --jaamd-spoiler-revealed-bg: #2c313c; --jaamd-spoiler-revealed-fg: #abb2bf; - --jaamd-alert-note-color: #61afef; - --jaamd-alert-note-bg: rgba(97, 175, 239, 0.1); - --jaamd-alert-tip-color: #98c379; - --jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1); - --jaamd-alert-important-color: #c678dd; - --jaamd-alert-important-bg: rgba(198, 120, 221, 0.1); - --jaamd-alert-warning-color: #e5c07b; - --jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1); - --jaamd-alert-caution-color: #e06c75; - --jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1); + --jaamd-alert-note-color: #61afef; + --jaamd-alert-note-bg: rgba(97, 175, 239, 0.1); + --jaamd-alert-tip-color: #98c379; + --jaamd-alert-tip-bg: rgba(152, 195, 121, 0.1); + --jaamd-alert-important-color:#c678dd; + --jaamd-alert-important-bg: rgba(198, 120, 221, 0.1); + --jaamd-alert-warning-color: #e5c07b; + --jaamd-alert-warning-bg: rgba(229, 192, 123, 0.1); + --jaamd-alert-caution-color: #e06c75; + --jaamd-alert-caution-bg: rgba(224, 108, 117, 0.1); } diff --git a/packages/jaamd/src/themes/one-dark/palette.js b/packages/jaamd/src/themes/one-dark/palette.js new file mode 100644 index 0000000..32f52aa --- /dev/null +++ b/packages/jaamd/src/themes/one-dark/palette.js @@ -0,0 +1,32 @@ +export default { + light: null, + dark: { + recessed: "#21252b", + base: "#282c34", + surface: "#2c313c", + overlay: "#3e4451", + text: "#abb2bf", + bright: "#e6e6e6", + + primary: "#61afef", + primaryLight: "#56b6c2", + accent: "#c678dd", + + alert: { + note: "#61afef", + tip: "#98c379", + important: "#c678dd", + warning: "#e5c07b", + caution: "#e06c75", + }, + + // Cards sit one step above the base, unlike the other dark themes. + overrides: { + "blockquote-bg": "#2c313c", + "blockquote-fg": "#5c6370", + "table-header-bg": "#21252b", + "details-bg": "#2c313c", + "details-border": "#3e4451", + }, + }, +}; diff --git a/packages/jaamd/src/themes/rose-pine-moon/index.css b/packages/jaamd/src/themes/rose-pine-moon/index.css index c70ef19..daf99cb 100644 --- a/packages/jaamd/src/themes/rose-pine-moon/index.css +++ b/packages/jaamd/src/themes/rose-pine-moon/index.css @@ -1,33 +1,121 @@ -/* JAAMD theme: Rosé Pine Moon. Dawn in light, moon in dark. */ +/* JAAMD theme: Rosé Pine Moon. Pairs with Shiki theme "rose-pine-dawn" and "rose-pine-moon". */ :root { - --jaamd-bg: #faf4ed; - --jaamd-color-fg: #575279; - --jaamd-color-fg-bright: #575279; - --jaamd-color-primary: #286983; - --jaamd-color-success: #286983; - --jaamd-alert-note-color: #56949f; - --jaamd-alert-tip-color: #286983; - --jaamd-alert-important-color: #286983; - --jaamd-alert-warning-color: #ea9d34; - --jaamd-alert-caution-color: #b4637a; - - --jaamd-border-strong: #9893a5; - --jaamd-em-fg: #907aa9; + --jaamd-bg: #faf4ed; + --jaamd-color-fg: #575279; + --jaamd-color-fg-bright: #575279; + --jaamd-color-primary: #286983; + --jaamd-color-primary-light: #56949f; + --jaamd-color-success: #286983; + + --jaamd-heading-border-color: rgba(40, 105, 131, 0.3); + + --jaamd-code-bg: #fffaf3; + --jaamd-code-border: #9893a5; + --jaamd-code-fg: #575279; + + --jaamd-pre-bg: #faf4ed; + --jaamd-pre-border: #fffaf3; + --jaamd-pre-fg: #575279; + + --jaamd-copy-btn-bg: #fffaf3; + --jaamd-copy-btn-border: #9893a5; + --jaamd-copy-btn-fg: #575279; + --jaamd-copy-btn-hover-bg: #9893a5; + --jaamd-copy-btn-hover-border:#286983; + --jaamd-copy-btn-hover-fg: #575279; + + --jaamd-blockquote-bg: #faf4ed; + --jaamd-blockquote-border: #9893a5; + --jaamd-blockquote-fg: #56949f; + + --jaamd-em-fg: #907aa9; + --jaamd-hr-color: rgba(40, 105, 131, 0.3); + + --jaamd-table-border: #fffaf3; + --jaamd-table-header-bg: #faf4ed; + --jaamd-table-hover-bg: #fffaf3; + + --jaamd-tabs-border: #fffaf3; + --jaamd-tabs-header-bg: #f2e9e1; + --jaamd-tabs-btn-hover-bg: #fffaf3; + --jaamd-tabs-btn-active-bg: #faf4ed; + + --jaamd-details-bg: #faf4ed; + --jaamd-details-border: #fffaf3; + + --jaamd-spoiler-hidden-color: #575279; + --jaamd-spoiler-revealed-bg: #fffaf3; + --jaamd-spoiler-revealed-fg: #575279; + + --jaamd-alert-note-color: #56949f; + --jaamd-alert-note-bg: rgba(86, 148, 159, 0.1); + --jaamd-alert-tip-color: #286983; + --jaamd-alert-tip-bg: rgba(40, 105, 131, 0.1); + --jaamd-alert-important-color:#907aa9; + --jaamd-alert-important-bg: rgba(144, 122, 169, 0.1); + --jaamd-alert-warning-color: #ea9d34; + --jaamd-alert-warning-bg: rgba(234, 157, 52, 0.1); + --jaamd-alert-caution-color: #b4637a; + --jaamd-alert-caution-bg: rgba(180, 99, 122, 0.1); } html.dark { - --jaamd-bg: #232136; - --jaamd-color-fg: #e0def4; - --jaamd-color-fg-bright: #e0def4; - --jaamd-color-primary: #9ccfd8; - --jaamd-color-success: #9ccfd8; - --jaamd-alert-note-color: #3e8fb0; - --jaamd-alert-tip-color: #9ccfd8; - --jaamd-alert-important-color: #9ccfd8; - --jaamd-alert-warning-color: #f6c177; - --jaamd-alert-caution-color: #eb6f92; - - --jaamd-border-strong: #6e6a86; - --jaamd-em-fg: #c4a7e7; + --jaamd-bg: #232136; + --jaamd-color-fg: #e0def4; + --jaamd-color-fg-bright: #e0def4; + --jaamd-color-primary: #9ccfd8; + --jaamd-color-primary-light: #3e8fb0; + --jaamd-color-success: #9ccfd8; + + --jaamd-heading-border-color: rgba(156, 207, 216, 0.3); + + --jaamd-code-bg: #2a273f; + --jaamd-code-border: #6e6a86; + --jaamd-code-fg: #e0def4; + + --jaamd-pre-bg: #232136; + --jaamd-pre-border: #2a273f; + --jaamd-pre-fg: #e0def4; + + --jaamd-copy-btn-bg: #2a273f; + --jaamd-copy-btn-border: #6e6a86; + --jaamd-copy-btn-fg: #e0def4; + --jaamd-copy-btn-hover-bg: #6e6a86; + --jaamd-copy-btn-hover-border:#9ccfd8; + --jaamd-copy-btn-hover-fg: #e0def4; + + --jaamd-blockquote-bg: #232136; + --jaamd-blockquote-border: #6e6a86; + --jaamd-blockquote-fg: #3e8fb0; + + --jaamd-em-fg: #c4a7e7; + --jaamd-hr-color: rgba(156, 207, 216, 0.3); + + --jaamd-table-border: #2a273f; + --jaamd-table-header-bg: #232136; + --jaamd-table-hover-bg: #2a273f; + + --jaamd-tabs-border: #2a273f; + --jaamd-tabs-header-bg: #232136; + --jaamd-tabs-btn-hover-bg: #2a273f; + --jaamd-tabs-btn-active-bg: #232136; + + --jaamd-details-bg: #232136; + --jaamd-details-border: #2a273f; + + --jaamd-spoiler-hidden-color: #e0def4; + --jaamd-spoiler-revealed-bg: #2a273f; + --jaamd-spoiler-revealed-fg: #e0def4; + + --jaamd-alert-note-color: #3e8fb0; + --jaamd-alert-note-bg: rgba(62, 143, 176, 0.1); + --jaamd-alert-tip-color: #9ccfd8; + --jaamd-alert-tip-bg: rgba(156, 207, 216, 0.1); + --jaamd-alert-important-color:#c4a7e7; + --jaamd-alert-important-bg: rgba(196, 167, 231, 0.1); + --jaamd-alert-warning-color: #f6c177; + --jaamd-alert-warning-bg: rgba(246, 193, 119, 0.1); + --jaamd-alert-caution-color: #eb6f92; + --jaamd-alert-caution-bg: rgba(235, 111, 146, 0.1); } diff --git a/packages/jaamd/src/themes/rose-pine-moon/palette.js b/packages/jaamd/src/themes/rose-pine-moon/palette.js new file mode 100644 index 0000000..b3e8011 --- /dev/null +++ b/packages/jaamd/src/themes/rose-pine-moon/palette.js @@ -0,0 +1,45 @@ +export default { + // Dawn, as in Rosé Pine. + light: { + recessed: "#f2e9e1", + base: "#faf4ed", + surface: "#fffaf3", + overlay: "#9893a5", + text: "#575279", + bright: "#575279", + + primary: "#286983", + primaryLight: "#56949f", + accent: "#907aa9", + + alert: { + note: "#56949f", + tip: "#286983", + important: "#907aa9", + warning: "#ea9d34", + caution: "#b4637a", + }, + }, + + // Moon + dark: { + recessed: "#232136", + base: "#232136", + surface: "#2a273f", + overlay: "#6e6a86", + text: "#e0def4", + bright: "#e0def4", + + primary: "#9ccfd8", + primaryLight: "#3e8fb0", + accent: "#c4a7e7", + + alert: { + note: "#3e8fb0", + tip: "#9ccfd8", + important: "#c4a7e7", + warning: "#f6c177", + caution: "#eb6f92", + }, + }, +}; diff --git a/packages/jaamd/src/themes/rose-pine/index.css b/packages/jaamd/src/themes/rose-pine/index.css index cc87240..a21793a 100644 --- a/packages/jaamd/src/themes/rose-pine/index.css +++ b/packages/jaamd/src/themes/rose-pine/index.css @@ -1,33 +1,121 @@ -/* JAAMD theme: Rosé Pine. Dawn in light, main in dark. */ +/* JAAMD theme: Rosé Pine. Pairs with Shiki theme "rose-pine-dawn" and "rose-pine". */ :root { - --jaamd-bg: #faf4ed; - --jaamd-color-fg: #575279; - --jaamd-color-fg-bright: #575279; - --jaamd-color-primary: #286983; - --jaamd-color-success: #286983; - --jaamd-alert-note-color: #56949f; - --jaamd-alert-tip-color: #286983; - --jaamd-alert-important-color: #286983; - --jaamd-alert-warning-color: #ea9d34; - --jaamd-alert-caution-color: #b4637a; - - --jaamd-border-strong: #9893a5; - --jaamd-em-fg: #907aa9; + --jaamd-bg: #faf4ed; + --jaamd-color-fg: #575279; + --jaamd-color-fg-bright: #575279; + --jaamd-color-primary: #286983; + --jaamd-color-primary-light: #56949f; + --jaamd-color-success: #286983; + + --jaamd-heading-border-color: rgba(40, 105, 131, 0.3); + + --jaamd-code-bg: #fffaf3; + --jaamd-code-border: #9893a5; + --jaamd-code-fg: #575279; + + --jaamd-pre-bg: #faf4ed; + --jaamd-pre-border: #fffaf3; + --jaamd-pre-fg: #575279; + + --jaamd-copy-btn-bg: #fffaf3; + --jaamd-copy-btn-border: #9893a5; + --jaamd-copy-btn-fg: #575279; + --jaamd-copy-btn-hover-bg: #9893a5; + --jaamd-copy-btn-hover-border:#286983; + --jaamd-copy-btn-hover-fg: #575279; + + --jaamd-blockquote-bg: #faf4ed; + --jaamd-blockquote-border: #9893a5; + --jaamd-blockquote-fg: #56949f; + + --jaamd-em-fg: #907aa9; + --jaamd-hr-color: rgba(40, 105, 131, 0.3); + + --jaamd-table-border: #fffaf3; + --jaamd-table-header-bg: #faf4ed; + --jaamd-table-hover-bg: #fffaf3; + + --jaamd-tabs-border: #fffaf3; + --jaamd-tabs-header-bg: #f2e9e1; + --jaamd-tabs-btn-hover-bg: #fffaf3; + --jaamd-tabs-btn-active-bg: #faf4ed; + + --jaamd-details-bg: #faf4ed; + --jaamd-details-border: #fffaf3; + + --jaamd-spoiler-hidden-color: #575279; + --jaamd-spoiler-revealed-bg: #fffaf3; + --jaamd-spoiler-revealed-fg: #575279; + + --jaamd-alert-note-color: #56949f; + --jaamd-alert-note-bg: rgba(86, 148, 159, 0.1); + --jaamd-alert-tip-color: #286983; + --jaamd-alert-tip-bg: rgba(40, 105, 131, 0.1); + --jaamd-alert-important-color:#907aa9; + --jaamd-alert-important-bg: rgba(144, 122, 169, 0.1); + --jaamd-alert-warning-color: #ea9d34; + --jaamd-alert-warning-bg: rgba(234, 157, 52, 0.1); + --jaamd-alert-caution-color: #b4637a; + --jaamd-alert-caution-bg: rgba(180, 99, 122, 0.1); } html.dark { - --jaamd-bg: #191724; - --jaamd-color-fg: #e0def4; - --jaamd-color-fg-bright: #e0def4; - --jaamd-color-primary: #9ccfd8; - --jaamd-color-success: #9ccfd8; - --jaamd-alert-note-color: #31748f; - --jaamd-alert-tip-color: #9ccfd8; - --jaamd-alert-important-color: #9ccfd8; - --jaamd-alert-warning-color: #f6c177; - --jaamd-alert-caution-color: #eb6f92; - - --jaamd-border-strong: #6e6a86; - --jaamd-em-fg: #c4a7e7; + --jaamd-bg: #191724; + --jaamd-color-fg: #e0def4; + --jaamd-color-fg-bright: #e0def4; + --jaamd-color-primary: #9ccfd8; + --jaamd-color-primary-light: #31748f; + --jaamd-color-success: #9ccfd8; + + --jaamd-heading-border-color: rgba(156, 207, 216, 0.3); + + --jaamd-code-bg: #1f1d2e; + --jaamd-code-border: #6e6a86; + --jaamd-code-fg: #e0def4; + + --jaamd-pre-bg: #191724; + --jaamd-pre-border: #1f1d2e; + --jaamd-pre-fg: #e0def4; + + --jaamd-copy-btn-bg: #1f1d2e; + --jaamd-copy-btn-border: #6e6a86; + --jaamd-copy-btn-fg: #e0def4; + --jaamd-copy-btn-hover-bg: #6e6a86; + --jaamd-copy-btn-hover-border:#9ccfd8; + --jaamd-copy-btn-hover-fg: #e0def4; + + --jaamd-blockquote-bg: #191724; + --jaamd-blockquote-border: #6e6a86; + --jaamd-blockquote-fg: #31748f; + + --jaamd-em-fg: #c4a7e7; + --jaamd-hr-color: rgba(156, 207, 216, 0.3); + + --jaamd-table-border: #1f1d2e; + --jaamd-table-header-bg: #191724; + --jaamd-table-hover-bg: #1f1d2e; + + --jaamd-tabs-border: #1f1d2e; + --jaamd-tabs-header-bg: #191724; + --jaamd-tabs-btn-hover-bg: #1f1d2e; + --jaamd-tabs-btn-active-bg: #191724; + + --jaamd-details-bg: #191724; + --jaamd-details-border: #1f1d2e; + + --jaamd-spoiler-hidden-color: #e0def4; + --jaamd-spoiler-revealed-bg: #1f1d2e; + --jaamd-spoiler-revealed-fg: #e0def4; + + --jaamd-alert-note-color: #31748f; + --jaamd-alert-note-bg: rgba(49, 116, 143, 0.1); + --jaamd-alert-tip-color: #9ccfd8; + --jaamd-alert-tip-bg: rgba(156, 207, 216, 0.1); + --jaamd-alert-important-color:#c4a7e7; + --jaamd-alert-important-bg: rgba(196, 167, 231, 0.1); + --jaamd-alert-warning-color: #f6c177; + --jaamd-alert-warning-bg: rgba(246, 193, 119, 0.1); + --jaamd-alert-caution-color: #eb6f92; + --jaamd-alert-caution-bg: rgba(235, 111, 146, 0.1); } diff --git a/packages/jaamd/src/themes/rose-pine/palette.js b/packages/jaamd/src/themes/rose-pine/palette.js new file mode 100644 index 0000000..c848145 --- /dev/null +++ b/packages/jaamd/src/themes/rose-pine/palette.js @@ -0,0 +1,45 @@ +export default { + // Dawn + light: { + recessed: "#f2e9e1", + base: "#faf4ed", + surface: "#fffaf3", + overlay: "#9893a5", + text: "#575279", + bright: "#575279", + + primary: "#286983", + primaryLight: "#56949f", + accent: "#907aa9", + + alert: { + note: "#56949f", + tip: "#286983", + important: "#907aa9", + warning: "#ea9d34", + caution: "#b4637a", + }, + }, + + dark: { + // Rosé Pine defines no level below base. + recessed: "#191724", + base: "#191724", + surface: "#1f1d2e", + overlay: "#6e6a86", + text: "#e0def4", + bright: "#e0def4", + + primary: "#9ccfd8", + primaryLight: "#31748f", + accent: "#c4a7e7", + + alert: { + note: "#31748f", + tip: "#9ccfd8", + important: "#c4a7e7", + warning: "#f6c177", + caution: "#eb6f92", + }, + }, +}; diff --git a/packages/jaamd/src/themes/tokyo-night/dark.css b/packages/jaamd/src/themes/tokyo-night/dark.css index 570f682..ebba0ea 100644 --- a/packages/jaamd/src/themes/tokyo-night/dark.css +++ b/packages/jaamd/src/themes/tokyo-night/dark.css @@ -1,18 +1,61 @@ -/* JAAMD theme: Tokyo Night (dark mode only). A dark theme: it applies in both modes. */ +/* JAAMD theme: Tokyo Night (dark mode only). Pairs with Shiki theme "tokyo-night". */ html.dark { - --jaamd-bg: #1a1b26; - --jaamd-color-fg: #a9b1d6; - --jaamd-color-fg-bright: #c0caf5; - --jaamd-color-primary: #7aa2f7; - --jaamd-color-success: #9ece6a; - --jaamd-alert-note-color: #7dcfff; - --jaamd-alert-tip-color: #9ece6a; - --jaamd-alert-important-color: #7aa2f7; - --jaamd-alert-warning-color: #e0af68; - --jaamd-alert-caution-color: #f7768e; - - --jaamd-border-strong: #565f89; - --jaamd-color-primary-light: #7dcfff; - --jaamd-em-fg: #bb9af7; + --jaamd-bg: #1a1b26; + --jaamd-color-fg: #a9b1d6; + --jaamd-color-fg-bright: #c0caf5; + --jaamd-color-primary: #7aa2f7; + --jaamd-color-primary-light: #7dcfff; + --jaamd-color-success: #9ece6a; + + --jaamd-heading-border-color: rgba(122, 162, 247, 0.3); + + --jaamd-code-bg: #292e42; + --jaamd-code-border: #565f89; + --jaamd-code-fg: #c0caf5; + + --jaamd-pre-bg: #1a1b26; + --jaamd-pre-border: #292e42; + --jaamd-pre-fg: #a9b1d6; + + --jaamd-copy-btn-bg: #292e42; + --jaamd-copy-btn-border: #565f89; + --jaamd-copy-btn-fg: #a9b1d6; + --jaamd-copy-btn-hover-bg: #565f89; + --jaamd-copy-btn-hover-border:#7aa2f7; + --jaamd-copy-btn-hover-fg: #c0caf5; + + --jaamd-blockquote-bg: #1a1b26; + --jaamd-blockquote-border: #565f89; + --jaamd-blockquote-fg: #7dcfff; + + --jaamd-em-fg: #bb9af7; + --jaamd-hr-color: rgba(122, 162, 247, 0.3); + + --jaamd-table-border: #292e42; + --jaamd-table-header-bg: #1a1b26; + --jaamd-table-hover-bg: #292e42; + + --jaamd-tabs-border: #292e42; + --jaamd-tabs-header-bg: #16161e; + --jaamd-tabs-btn-hover-bg: #292e42; + --jaamd-tabs-btn-active-bg: #1a1b26; + + --jaamd-details-bg: #1a1b26; + --jaamd-details-border: #292e42; + + --jaamd-spoiler-hidden-color: #c0caf5; + --jaamd-spoiler-revealed-bg: #292e42; + --jaamd-spoiler-revealed-fg: #a9b1d6; + + --jaamd-alert-note-color: #7dcfff; + --jaamd-alert-note-bg: rgba(125, 207, 255, 0.1); + --jaamd-alert-tip-color: #9ece6a; + --jaamd-alert-tip-bg: rgba(158, 206, 106, 0.1); + --jaamd-alert-important-color:#7aa2f7; + --jaamd-alert-important-bg: rgba(122, 162, 247, 0.1); + --jaamd-alert-warning-color: #e0af68; + --jaamd-alert-warning-bg: rgba(224, 175, 104, 0.1); + --jaamd-alert-caution-color: #f7768e; + --jaamd-alert-caution-bg: rgba(247, 118, 142, 0.1); } diff --git a/packages/jaamd/src/themes/tokyo-night/index.css b/packages/jaamd/src/themes/tokyo-night/index.css index 33f2075..6dcce4b 100644 --- a/packages/jaamd/src/themes/tokyo-night/index.css +++ b/packages/jaamd/src/themes/tokyo-night/index.css @@ -1,18 +1,61 @@ -/* JAAMD theme: Tokyo Night. A dark theme: it applies in both modes. */ +/* JAAMD theme: Tokyo Night. Pairs with Shiki theme "tokyo-night". */ :root { - --jaamd-bg: #1a1b26; - --jaamd-color-fg: #a9b1d6; - --jaamd-color-fg-bright: #c0caf5; - --jaamd-color-primary: #7aa2f7; - --jaamd-color-success: #9ece6a; - --jaamd-alert-note-color: #7dcfff; - --jaamd-alert-tip-color: #9ece6a; - --jaamd-alert-important-color: #7aa2f7; - --jaamd-alert-warning-color: #e0af68; - --jaamd-alert-caution-color: #f7768e; - - --jaamd-border-strong: #565f89; - --jaamd-color-primary-light: #7dcfff; - --jaamd-em-fg: #bb9af7; + --jaamd-bg: #1a1b26; + --jaamd-color-fg: #a9b1d6; + --jaamd-color-fg-bright: #c0caf5; + --jaamd-color-primary: #7aa2f7; + --jaamd-color-primary-light: #7dcfff; + --jaamd-color-success: #9ece6a; + + --jaamd-heading-border-color: rgba(122, 162, 247, 0.3); + + --jaamd-code-bg: #292e42; + --jaamd-code-border: #565f89; + --jaamd-code-fg: #c0caf5; + + --jaamd-pre-bg: #1a1b26; + --jaamd-pre-border: #292e42; + --jaamd-pre-fg: #a9b1d6; + + --jaamd-copy-btn-bg: #292e42; + --jaamd-copy-btn-border: #565f89; + --jaamd-copy-btn-fg: #a9b1d6; + --jaamd-copy-btn-hover-bg: #565f89; + --jaamd-copy-btn-hover-border:#7aa2f7; + --jaamd-copy-btn-hover-fg: #c0caf5; + + --jaamd-blockquote-bg: #1a1b26; + --jaamd-blockquote-border: #565f89; + --jaamd-blockquote-fg: #7dcfff; + + --jaamd-em-fg: #bb9af7; + --jaamd-hr-color: rgba(122, 162, 247, 0.3); + + --jaamd-table-border: #292e42; + --jaamd-table-header-bg: #1a1b26; + --jaamd-table-hover-bg: #292e42; + + --jaamd-tabs-border: #292e42; + --jaamd-tabs-header-bg: #16161e; + --jaamd-tabs-btn-hover-bg: #292e42; + --jaamd-tabs-btn-active-bg: #1a1b26; + + --jaamd-details-bg: #1a1b26; + --jaamd-details-border: #292e42; + + --jaamd-spoiler-hidden-color: #c0caf5; + --jaamd-spoiler-revealed-bg: #292e42; + --jaamd-spoiler-revealed-fg: #a9b1d6; + + --jaamd-alert-note-color: #7dcfff; + --jaamd-alert-note-bg: rgba(125, 207, 255, 0.1); + --jaamd-alert-tip-color: #9ece6a; + --jaamd-alert-tip-bg: rgba(158, 206, 106, 0.1); + --jaamd-alert-important-color:#7aa2f7; + --jaamd-alert-important-bg: rgba(122, 162, 247, 0.1); + --jaamd-alert-warning-color: #e0af68; + --jaamd-alert-warning-bg: rgba(224, 175, 104, 0.1); + --jaamd-alert-caution-color: #f7768e; + --jaamd-alert-caution-bg: rgba(247, 118, 142, 0.1); } diff --git a/packages/jaamd/src/themes/tokyo-night/palette.js b/packages/jaamd/src/themes/tokyo-night/palette.js new file mode 100644 index 0000000..7a5ca78 --- /dev/null +++ b/packages/jaamd/src/themes/tokyo-night/palette.js @@ -0,0 +1,23 @@ +export default { + light: null, + dark: { + recessed: "#16161e", + base: "#1a1b26", + surface: "#292e42", + overlay: "#565f89", + text: "#a9b1d6", + bright: "#c0caf5", + + primary: "#7aa2f7", + primaryLight: "#7dcfff", + accent: "#bb9af7", + + alert: { + note: "#7dcfff", + tip: "#9ece6a", + important: "#7aa2f7", + warning: "#e0af68", + caution: "#f7768e", + }, + }, +}; diff --git a/scripts/build-themes.mjs b/scripts/build-themes.mjs index 6f9260e..5d15eb4 100644 --- a/scripts/build-themes.mjs +++ b/scripts/build-themes.mjs @@ -1,30 +1,150 @@ #!/usr/bin/env node /** - * `dark.css` is `index.css` under `html.dark`, generated rather than kept in - * sync by hand. + * Themes are generated from `palette.js`. A palette declares fourteen colours; + * this maps them onto the token set every theme shares. + * + * A single-palette theme also gets `dark.css`, the same tokens under `html.dark`. + * A dual theme covers both modes itself and gets none. * * `--check` verifies the committed files instead of writing them. */ import { readdirSync, readFileSync, writeFileSync, rmSync, existsSync } from "node:fs"; import { join } from "node:path"; -import { fileURLToPath } from "node:url"; +import { fileURLToPath, pathToFileURL } from "node:url"; import { themes } from "../packages/jaamd/src/themes/index.js"; const THEMES = join(process.cwd(), "packages", "jaamd", "src", "themes"); -/** A dual theme carries both palettes; it gets no dark variant. */ -const isDual = (slug) => themes.find((t) => t.slug === slug)?.mode === "dual"; +/** Token to palette role, in output order. Groups are separated by a blank line. */ +const GROUPS = [ + [ + ["bg", "base"], + ["color-fg", "text"], + ["color-fg-bright", "bright"], + ["color-primary", "primary"], + ["color-primary-light", "primaryLight"], + ["color-success", "alert.tip"], + ], + [["heading-border-color", "primary@0.3"]], + [ + ["code-bg", "surface"], + ["code-border", "overlay"], + ["code-fg", "bright"], + ], + [ + ["pre-bg", "base"], + ["pre-border", "surface"], + ["pre-fg", "text"], + ], + [ + ["copy-btn-bg", "surface"], + ["copy-btn-border", "overlay"], + ["copy-btn-fg", "text"], + ["copy-btn-hover-bg", "overlay"], + ["copy-btn-hover-border", "primary"], + ["copy-btn-hover-fg", "bright"], + ], + [ + ["blockquote-bg", "base"], + ["blockquote-border", "overlay"], + ["blockquote-fg", "primaryLight"], + ], + [ + ["em-fg", "accent"], + ["hr-color", "primary@0.3"], + ], + [ + ["table-border", "surface"], + ["table-header-bg", "base"], + ["table-hover-bg", "surface"], + ], + [ + ["tabs-border", "surface"], + ["tabs-header-bg", "recessed"], + ["tabs-btn-hover-bg", "surface"], + ["tabs-btn-active-bg", "base"], + ], + [ + ["details-bg", "base"], + ["details-border", "surface"], + ], + [ + ["spoiler-hidden-color", "bright"], + ["spoiler-revealed-bg", "surface"], + ["spoiler-revealed-fg", "text"], + ], + ["note", "tip", "important", "warning", "caution"].flatMap((kind) => [ + [`alert-${kind}-color`, `alert.${kind}`], + [`alert-${kind}-bg`, `alert.${kind}@0.1`], + ]), +]; + +export const TOKENS = GROUPS.flat().map(([token]) => token); + +const COLUMN = 32; + +function rgba(hex, alpha) { + const n = hex.replace("#", ""); + const [r, g, b] = [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16)); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +} + +/** "surface", "alert.tip", "primary@0.3". */ +function resolve(palette, role) { + const [path, alpha] = role.split("@"); + const value = path.split(".").reduce((o, k) => o?.[k], palette); + if (value === undefined) throw new Error(`palette is missing "${path}"`); + return alpha ? rgba(value, alpha) : value; +} + +function block(palette, selector) { + const lines = [`${selector} {`]; + + GROUPS.forEach((group, i) => { + if (i > 0) lines.push(""); + for (const [token, role] of group) { + const value = palette.overrides?.[token] ?? resolve(palette, role); + lines.push(` --jaamd-${token}:`.padEnd(COLUMN) + value + ";"); + } + }); + + return [...lines, "}"].join("\n"); +} + +/** The CSS a theme's palette produces. `dark` is null for a dual theme. */ +export async function render(slug) { + const path = join(THEMES, slug, "palette.js"); + if (!existsSync(path)) throw new Error(`${slug}: no palette.js`); + + const { light, dark } = (await import(pathToFileURL(path).href)).default; + const theme = themes.find((t) => t.slug === slug); + const name = theme?.name ?? slug; + const shiki = + typeof theme?.shiki === "string" + ? `"${theme.shiki}"` + : `"${theme?.shiki.light}" and "${theme?.shiki.dark}"`; + + const header = (suffix) => + `/* JAAMD theme: ${name}${suffix}. Pairs with Shiki theme ${shiki}. */\n\n`; -/** The dark variant of a theme's source. */ -export function darkVariant(source) { - return source - .replace(/^(\/\* JAAMD theme: [^.]+)\./m, "$1 (dark mode only).") - .replace(/^:root \{$/m, "html.dark {"); + if (light && dark) { + return { + index: + header("") + block(light, ":root") + "\n\n" + block(dark, "html.dark") + "\n", + dark: null, + }; + } + + const only = light ?? dark; + return { + index: header("") + block(only, ":root") + "\n", + dark: header(" (dark mode only)") + block(only, "html.dark") + "\n", + }; } -function run(check) { +async function run(check) { const slugs = readdirSync(THEMES, { withFileTypes: true }) .filter((e) => e.isDirectory()) .map((e) => e.name) @@ -33,42 +153,43 @@ function run(check) { const stale = []; for (const slug of slugs) { - const path = join(THEMES, slug, "dark.css"); - - if (isDual(slug)) { - if (check) { - if (existsSync(path)) stale.push(`${slug} (dual, should have no dark.css)`); - } else if (existsSync(path)) { - rmSync(path); - console.log(`✓ ${slug}/dark.css removed (dual)`); - } - continue; - } - - const source = readFileSync(join(THEMES, slug, "index.css"), "utf8"); - const expected = darkVariant(source); + const { index, dark } = await render(slug); + const indexPath = join(THEMES, slug, "index.css"); + const darkPath = join(THEMES, slug, "dark.css"); if (check) { - if (!existsSync(path) || readFileSync(path, "utf8") !== expected) stale.push(slug); + if (!existsSync(indexPath) || readFileSync(indexPath, "utf8") !== index) { + stale.push(`${slug}/index.css`); + } + if (dark === null) { + if (existsSync(darkPath)) stale.push(`${slug}/dark.css (dual)`); + } else if (!existsSync(darkPath) || readFileSync(darkPath, "utf8") !== dark) { + stale.push(`${slug}/dark.css`); + } continue; } - writeFileSync(path, expected); - console.log(`✓ ${slug}/dark.css`); + writeFileSync(indexPath, index); + if (dark === null) { + if (existsSync(darkPath)) rmSync(darkPath); + console.log(`✓ ${slug}/index.css`); + } else { + writeFileSync(darkPath, dark); + console.log(`✓ ${slug}/index.css + dark.css`); + } } if (!check) return; if (stale.length > 0) { console.error( - `✗ stale dark.css: ${stale.join(", ")}\n Run \`pnpm build:themes\` and commit the result.`, + `✗ stale: ${stale.join(", ")}\n Run \`pnpm build:themes\` and commit the result.`, ); process.exit(1); } console.log(`✓ ${slugs.length} theme(s) in sync`); } -// Importing this module must not rewrite the files it is used to verify. if (process.argv[1] && fileURLToPath(import.meta.url) === process.argv[1]) { - run(process.argv.includes("--check")); + await run(process.argv.includes("--check")); } From 6ce0d0bcf3bb135760fa50865c3f0e1b3eaa59dc Mon Sep 17 00:00:00 2001 From: Luca Pattocchio <15154851+Kasui92@users.noreply.github.com> Date: Mon, 7 Sep 2026 08:33:10 +0200 Subject: [PATCH 3/4] upd: check the palette contract and the shared token set --- tests/unit/themes.mjs | 75 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 73 insertions(+), 2 deletions(-) diff --git a/tests/unit/themes.mjs b/tests/unit/themes.mjs index 3971531..265e19d 100644 --- a/tests/unit/themes.mjs +++ b/tests/unit/themes.mjs @@ -8,8 +8,23 @@ import { readdirSync, readFileSync, existsSync } from "node:fs"; import { join } from "node:path"; import { bundledThemes } from "shiki"; +import { pathToFileURL } from "node:url"; + import { themes, REQUIRED_TOKENS } from "../../packages/jaamd/src/themes/index.js"; -import { darkVariant } from "../../scripts/build-themes.mjs"; +import { render, TOKENS } from "../../scripts/build-themes.mjs"; + +const LEVELS = [ + "recessed", + "base", + "surface", + "overlay", + "text", + "bright", + "primary", + "primaryLight", + "accent", +]; +const ALERTS = ["note", "tip", "important", "warning", "caution"]; const THEMES = join(process.cwd(), "packages", "jaamd", "src", "themes"); @@ -60,6 +75,42 @@ for (const slug of slugs) { "a dual palette needs a light and a dark Shiki theme to match it", ); + // ─── the palette behind it ───────────────────────────────────────────────── + // Checked before the CSS: a gap here makes the generator throw, and a stack + // trace says less than the name of the missing level. + + const palettePath = join(THEMES, slug, "palette.js"); + + if (!existsSync(palettePath)) { + check(`${slug}: has palette.js`, false, "the CSS is generated from a palette"); + continue; + } + + const palette = (await import(pathToFileURL(palettePath).href)).default; + const sets = [palette.light, palette.dark].filter(Boolean); + + check( + `${slug}: palette matches its mode`, + dual ? sets.length === 2 : sets.length === 1, + dual + ? "a dual theme needs both a light and a dark palette" + : "a single-palette theme declares one of light or dark, the other null", + ); + + const gaps = sets.flatMap((set) => [ + ...LEVELS.filter((level) => !set[level]), + ...ALERTS.filter((kind) => !set.alert?.[kind]).map((k) => `alert.${k}`), + ]); + + check( + `${slug}: palette declares every level`, + gaps.length === 0, + `missing ${[...new Set(gaps)].join(", ")}`, + ); + if (gaps.length > 0) continue; + + // ─── the CSS it generates ────────────────────────────────────────────────── + const indexPath = join(THEMES, slug, "index.css"); const darkPath = join(THEMES, slug, "dark.css"); @@ -92,15 +143,35 @@ for (const slug of slugs) { `missing ${missing.join(", ")}: derived tokens fall back to the default palette`, ); + // One kind of file: no theme is richer or poorer than the others. + const absent = blocks.flatMap((b) => + TOKENS.filter((token) => !new RegExp(`^\\s*--jaamd-${token}\\s*:`, "m").test(b)), + ); + + check( + `${slug}: declares the whole token set`, + absent.length === 0, + `missing ${[...new Set(absent)].join(", ")}`, + ); + + const generated = await render(slug); + + check( + `${slug}: index.css is in sync with palette.js`, + source === generated.index, + "run `pnpm build:themes` and commit the result", + ); + check( `${slug}: dark.css matches its mode`, dual ? !existsSync(darkPath) - : existsSync(darkPath) && readFileSync(darkPath, "utf8") === darkVariant(source), + : existsSync(darkPath) && readFileSync(darkPath, "utf8") === generated.dark, dual ? "a dual theme already covers dark mode; it must not ship a /dark variant" : "run `pnpm build:themes` and commit the result", ); + } // ─── and nothing is declared that does not exist ───────────────────────────── From d09a4efba1980c76a94da7efdb19b8afa4cec8f7 Mon Sep 17 00:00:00 2001 From: Luca Pattocchio <15154851+Kasui92@users.noreply.github.com> Date: Mon, 7 Sep 2026 08:33:10 +0200 Subject: [PATCH 4/4] upd: document themes as generated from a palette --- CONTRIBUTING.md | 76 ++++++++++++++++++++++------------------ packages/jaamd/README.md | 4 ++- 2 files changed, 44 insertions(+), 36 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f811235..114c1d8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -11,36 +11,50 @@ pnpm build && pnpm smoke ## Themes A theme is a directory under `packages/jaamd/src/themes//` plus one entry in -`packages/jaamd/src/themes/index.ts`. Themes are welcome as pull requests. - -### 1. Write `index.css` - -A `:root` block of `--jaamd-*` declarations. A theme with both a light and a dark -palette adds a second block on `html.dark` and repeats the seeds there; otherwise -one mode borrows the other's background. These **seeds are required**: - -| Token | What it is | -|---|---| -| `--jaamd-bg` | Page background the palette assumes | -| `--jaamd-color-fg` | Body text | -| `--jaamd-color-fg-bright` | Headings, strong, table headers | -| `--jaamd-color-primary` | Links and accents | -| `--jaamd-alert-*-color` | The five alert hues: note, tip, important, warning, caution | +`packages/jaamd/src/themes/index.js`. Themes are welcome as pull requests. + +The CSS is generated. You write a palette; `pnpm build:themes` writes `index.css` +and, for a single-palette theme, `dark.css`. Never edit those by hand. + +### 1. Write `palette.js` + +Fourteen colours per palette. A `dual` theme fills both `light` and `dark`, the +others leave one `null`. + +```js +export default { + light: null, + dark: { + recessed: "#21222c", // below the background: code-tab header + base: "#282a36", // the background itself + surface: "#44475a", // raised: inline code, table rows, spoilers + overlay: "#6272a4", // borders and rules + text: "#f8f8f2", + bright: "#ffffff", // headings, strong + + primary: "#bd93f9", + primaryLight: "#ff79c6", + accent: "#8be9fd", // emphasis + + alert: { note: "#8be9fd", tip: "#50fa7b", important: "#bd93f9", + warning: "#f1fa8c", caution: "#ff5555" }, + }, +}; +``` -Everything else (surfaces, borders, the table-of-contents card, alert backgrounds) -is derived from those by `src/styles/variables.css`: a nine-colour theme is -complete. Omit `--jaamd-bg` and the derived tokens mix against the *default* -background instead of yours. +Most palettes document these levels already: Catppuccin has `mantle/base/surface0/ +overlay0/text`, Gruvbox the `bg0_h/bg0/bg1/bg2`, Rosé Pine `base/surface/muted`, +Tokyo Night `bg_dark/bg/bg_highlight/comment`. -Beyond the seeds, override any concrete token an editor scheme defines by hand -rather than by formula: `--jaamd-code-bg`, `--jaamd-pre-bg` and friends. See an -existing theme for the full list. +Where a palette wants a token off the recipe, add it under `overrides`: -Do not restate the font tokens: they are the defaults already. +```js + overrides: { "blockquote-fg": "#6272a4" }, +``` ### 2. Declare it -Add an entry to `src/themes/index.ts` with the directory name as `slug` and a +Add an entry to `src/themes/index.js` with the directory name as `slug` and a readable `name`, plus: | `mode` | The palette is | `shiki` | @@ -48,20 +62,12 @@ readable `name`, plus: | `"light"` / `"dark"` | one palette, applying in both modes | one theme name | | `"dual"` | two palettes, `:root` and `html.dark` | `{ light, dark }` | -### 3. Generate the dark variant +### 3. Generate and check ```bash pnpm build:themes -``` - -`dark.css` is `index.css` under `html.dark`: the variant for using a single-palette -theme only in dark mode. It is generated and committed; never edit it by hand. A -`dual` theme covers dark mode itself and gets no `dark.css`. - -### 4. Check it - -```bash pnpm test:themes ``` -It names the missing seed, an unknown Shiki theme, or a stale `dark.css`. +The test names the missing level, an unknown Shiki theme, a token no other theme +lacks, or CSS that no longer matches its palette. diff --git a/packages/jaamd/README.md b/packages/jaamd/README.md index 9b12d1d..e9914d0 100644 --- a/packages/jaamd/README.md +++ b/packages/jaamd/README.md @@ -427,7 +427,9 @@ import { themes } from "@lancher-dev/jaamd/themes"; // [{ slug: "dracula", name: "Dracula", mode: "dark", shiki: "dracula" }, …] ``` -To customise one, copy a directory from `src/themes/`. To add one, see +Each preset is generated from a `palette.js` of fourteen colours, so every theme +declares the same token set. The `.css` files are build output: to customise a +preset, copy its directory and edit the palette. To add one, see [CONTRIBUTING.md](../../CONTRIBUTING.md#themes). ### Dual-theme Shiki