picocrank 1.24.0 → 1.25.1

package/supplemental-themes/catppuccin-latte-frappe/theme.css

@@ -0,0 +1,211 @@
+/*
+ * Catppuccin Latte / Frappé supplemental theme for PicoCrank / Femtocrank.
+ * Palette: https://catppuccin.com/palette/
+ *
+ * Light mode (header toggle) uses Latte; dark mode uses Frappé.
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/supplemental-themes/catppuccin-latte-frappe/background.png');
+ */
+
+html[data-theme="dark"] {
+	color-scheme: dark;
+
+	--ctp-rosewater: #f2d5cf;
+	--ctp-flamingo: #eebebe;
+	--ctp-pink: #f4b8e4;
+	--ctp-mauve: #ca9ee6;
+	--ctp-red: #e78284;
+	--ctp-maroon: #ea999c;
+	--ctp-peach: #ef9f76;
+	--ctp-yellow: #e5c890;
+	--ctp-green: #a6d189;
+	--ctp-teal: #81c8be;
+	--ctp-sky: #99d1db;
+	--ctp-sapphire: #85c1dc;
+	--ctp-blue: #8caaee;
+	--ctp-lavender: #babbf1;
+	--ctp-text: #c6d0f5;
+	--ctp-subtext1: #b5bfe2;
+	--ctp-subtext0: #a5adce;
+	--ctp-overlay2: #949cbb;
+	--ctp-overlay1: #838ba7;
+	--ctp-overlay0: #737994;
+	--ctp-surface2: #626880;
+	--ctp-surface1: #51576d;
+	--ctp-surface0: #414559;
+	--ctp-base: #303446;
+	--ctp-mantle: #292c3c;
+	--ctp-crust: #232634;
+	--ctp-shadow-strong: rgba(35, 38, 52, 0.9);
+	--ctp-good-fg: var(--ctp-crust);
+
+	--body-bg-color: var(--ctp-base);
+	--surface-bg-color: var(--ctp-mantle);
+	--standout-bg-color: var(--ctp-mantle);
+	--section-header-bg-color: var(--ctp-mantle);
+	--shadow-color: var(--ctp-shadow-strong);
+
+	--text-color: var(--ctp-text);
+	--muted-text-color: var(--ctp-subtext0);
+	--annotation-key-color: var(--ctp-subtext0);
+	--link-color: var(--ctp-blue);
+	--border-color: var(--ctp-surface1);
+
+	--hover-background-color: var(--ctp-surface0);
+	--hover-text-color: var(--ctp-text);
+
+	--header-bg-color: var(--ctp-crust);
+	--header-fg-color: var(--ctp-text);
+	--header-border-color: var(--ctp-surface0);
+	--header-shadow: none;
+	--header-hover-background-color: var(--ctp-surface1);
+	--header-hover-text-color: var(--ctp-text);
+	--header-button-hover-bg-color: var(--ctp-surface1);
+
+	--sidebar-bg-color: var(--ctp-mantle);
+	--sidebar-link-color: var(--ctp-text);
+	--sidebar-hover-bg-color: var(--ctp-surface0);
+	--sidebar-border-color: var(--ctp-surface0);
+
+	--input-bg-color: var(--ctp-surface0);
+	--input-fg-color: var(--ctp-text);
+	--control-option-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface0);
+	--menu-hover-bg-color: var(--ctp-surface0);
+
+	--table-row-hover-bg: var(--ctp-surface0);
+	--table-row-hover-fg: var(--ctp-text);
+	--table-uneditable-bg: var(--ctp-surface0);
+	--footer-chip-bg-color: var(--ctp-surface1);
+
+	--disabled-background-color: var(--ctp-surface0);
+	--disabled-text-color: var(--ctp-overlay0);
+
+	--button-good-bg: var(--ctp-green);
+	--button-good-hover-bg: var(--ctp-green);
+	--button-bad-bg: var(--ctp-red);
+	--button-bad-hover-bg: var(--ctp-red);
+	--button-warning-bg: var(--ctp-yellow);
+	--button-warning-hover-bg: var(--ctp-yellow);
+	--button-on-accent-fg: var(--ctp-good-fg);
+
+	--karma-good: var(--ctp-green);
+	--karma-bad: var(--ctp-red);
+	--karma-warning: var(--ctp-yellow);
+	--karma-severe: var(--ctp-maroon);
+	--karma-important: var(--ctp-peach);
+	--karma-note: var(--ctp-sapphire);
+	--karma-info: var(--ctp-surface1);
+	--karma-old: var(--ctp-overlay0);
+
+	--karma-good-fg: var(--ctp-green);
+	--karma-bad-fg: var(--ctp-red);
+	--karma-warning-fg: var(--ctp-yellow);
+	--karma-severe-fg: var(--ctp-maroon);
+	--karma-important-fg: var(--ctp-peach);
+	--karma-note-fg: var(--ctp-sapphire);
+	--karma-info-fg: var(--ctp-subtext0);
+	--karma-old-fg: var(--ctp-overlay1);
+}
+
+html[data-theme="light"] {
+	color-scheme: light;
+
+	--ctp-rosewater: #dc8a78;
+	--ctp-flamingo: #dd7878;
+	--ctp-pink: #ea76cb;
+	--ctp-mauve: #8839ef;
+	--ctp-red: #d20f39;
+	--ctp-maroon: #e64553;
+	--ctp-peach: #fe640b;
+	--ctp-yellow: #df8e1d;
+	--ctp-green: #40a02b;
+	--ctp-teal: #179299;
+	--ctp-sky: #04a5e5;
+	--ctp-sapphire: #209fb5;
+	--ctp-blue: #1e66f5;
+	--ctp-lavender: #7287fd;
+	--ctp-text: #4c4f69;
+	--ctp-subtext1: #5c5f77;
+	--ctp-subtext0: #6c6f85;
+	--ctp-overlay2: #7c7f93;
+	--ctp-overlay1: #8c8fa1;
+	--ctp-overlay0: #9ca0b0;
+	--ctp-surface2: #acb0be;
+	--ctp-surface1: #bcc0cc;
+	--ctp-surface0: #ccd0da;
+	--ctp-base: #eff1f5;
+	--ctp-mantle: #e6e9ef;
+	--ctp-crust: #dce0e8;
+	--ctp-shadow-strong: rgba(76, 79, 105, 0.16);
+	--ctp-good-fg: var(--ctp-base);
+
+	--body-bg-color: var(--ctp-base);
+	--surface-bg-color: var(--ctp-mantle);
+	--standout-bg-color: var(--ctp-mantle);
+	--section-header-bg-color: var(--ctp-mantle);
+	--shadow-color: var(--ctp-shadow-strong);
+
+	--text-color: var(--ctp-text);
+	--muted-text-color: var(--ctp-subtext0);
+	--annotation-key-color: var(--ctp-subtext0);
+	--link-color: var(--ctp-blue);
+	--border-color: var(--ctp-surface1);
+
+	--hover-background-color: var(--ctp-surface0);
+	--hover-text-color: var(--ctp-text);
+
+	--header-bg-color: var(--ctp-crust);
+	--header-fg-color: var(--ctp-text);
+	--header-border-color: var(--ctp-surface0);
+	--header-shadow: none;
+	--header-hover-background-color: var(--ctp-surface0);
+	--header-hover-text-color: var(--ctp-text);
+	--header-button-hover-bg-color: var(--ctp-surface0);
+
+	--sidebar-bg-color: var(--ctp-mantle);
+	--sidebar-link-color: var(--ctp-text);
+	--sidebar-hover-bg-color: var(--ctp-surface0);
+	--sidebar-border-color: var(--ctp-surface0);
+
+	--input-bg-color: var(--ctp-surface0);
+	--input-fg-color: var(--ctp-text);
+	--control-option-bg-color: var(--ctp-surface0);
+	--control-hover-bg-color: var(--ctp-surface0);
+	--menu-hover-bg-color: var(--ctp-surface0);
+
+	--table-row-hover-bg: var(--ctp-surface0);
+	--table-row-hover-fg: var(--ctp-text);
+	--table-uneditable-bg: var(--ctp-surface0);
+	--footer-chip-bg-color: var(--ctp-surface1);
+
+	--disabled-background-color: var(--ctp-surface0);
+	--disabled-text-color: var(--ctp-overlay0);
+
+	--button-good-bg: var(--ctp-green);
+	--button-good-hover-bg: var(--ctp-green);
+	--button-bad-bg: var(--ctp-red);
+	--button-bad-hover-bg: var(--ctp-red);
+	--button-warning-bg: var(--ctp-yellow);
+	--button-warning-hover-bg: var(--ctp-yellow);
+	--button-on-accent-fg: var(--ctp-good-fg);
+
+	--karma-good: var(--ctp-green);
+	--karma-bad: var(--ctp-red);
+	--karma-warning: var(--ctp-yellow);
+	--karma-severe: var(--ctp-maroon);
+	--karma-important: var(--ctp-peach);
+	--karma-note: var(--ctp-sapphire);
+	--karma-info: var(--ctp-surface1);
+	--karma-old: var(--ctp-overlay0);
+
+	--karma-good-fg: var(--ctp-green);
+	--karma-bad-fg: var(--ctp-red);
+	--karma-warning-fg: var(--ctp-yellow);
+	--karma-severe-fg: var(--ctp-maroon);
+	--karma-important-fg: var(--ctp-peach);
+	--karma-note-fg: var(--ctp-sapphire);
+	--karma-info-fg: var(--ctp-subtext0);
+	--karma-old-fg: var(--ctp-overlay1);
+}

package/supplemental-themes/dracula-alucard/theme.css

@@ -0,0 +1,193 @@
+/*
+ * Dracula / Alucard supplemental theme for PicoCrank / Femtocrank.
+ * Palettes: https://draculatheme.com/spec (Dracula Classic + Alucard Classic)
+ *
+ * Dark mode (header toggle) uses Dracula; light mode uses Alucard.
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/supplemental-themes/dracula-alucard/background.png');
+ */
+
+html[data-theme="dark"] {
+	color-scheme: dark;
+
+	--dt-background: #282a36;
+	--dt-surface: #21222c;
+	--dt-overlay: #44475a;
+	--dt-border: #44475a;
+	--dt-foreground: #f8f8f2;
+	--dt-muted: #6272a4;
+	--dt-selection: #44475a;
+	--dt-cyan: #8be9fd;
+	--dt-green: #50fa7b;
+	--dt-orange: #ffb86c;
+	--dt-pink: #ff79c6;
+	--dt-purple: #bd93f9;
+	--dt-red: #ff5555;
+	--dt-yellow: #f1fa8c;
+	--dt-accent: var(--dt-pink);
+	--dt-shadow-strong: rgba(33, 34, 44, 0.9);
+	--dt-good-fg: var(--dt-surface);
+	--dt-bad-fg: var(--dt-foreground);
+	--dt-warning-fg: var(--dt-surface);
+
+	--body-bg-color: var(--dt-background);
+	--surface-bg-color: var(--dt-surface);
+	--standout-bg-color: var(--dt-surface);
+	--section-header-bg-color: var(--dt-surface);
+	--shadow-color: var(--dt-shadow-strong);
+
+	--text-color: var(--dt-foreground);
+	--muted-text-color: var(--dt-muted);
+	--annotation-key-color: var(--dt-muted);
+	--link-color: var(--dt-accent);
+	--border-color: var(--dt-border);
+
+	--hover-background-color: var(--dt-selection);
+	--hover-text-color: var(--dt-foreground);
+
+	--header-bg-color: var(--dt-surface);
+	--header-fg-color: var(--dt-foreground);
+	--header-border-color: var(--dt-border);
+	--header-shadow: none;
+	--header-hover-background-color: var(--dt-selection);
+	--header-hover-text-color: var(--dt-foreground);
+	--header-button-hover-bg-color: var(--dt-selection);
+
+	--sidebar-bg-color: var(--dt-surface);
+	--sidebar-link-color: var(--dt-foreground);
+	--sidebar-hover-bg-color: var(--dt-selection);
+	--sidebar-border-color: var(--dt-border);
+
+	--input-bg-color: var(--dt-background);
+	--input-fg-color: var(--dt-foreground);
+	--control-option-bg-color: var(--dt-overlay);
+	--control-hover-bg-color: var(--dt-selection);
+	--menu-hover-bg-color: var(--dt-selection);
+
+	--table-row-hover-bg: var(--dt-selection);
+	--table-row-hover-fg: var(--dt-foreground);
+	--table-uneditable-bg: var(--dt-overlay);
+	--footer-chip-bg-color: var(--dt-overlay);
+
+	--disabled-background-color: var(--dt-overlay);
+	--disabled-text-color: var(--dt-muted);
+
+	--button-good-bg: var(--dt-green);
+	--button-good-hover-bg: var(--dt-green);
+	--button-bad-bg: var(--dt-red);
+	--button-bad-hover-bg: var(--dt-red);
+	--button-warning-bg: var(--dt-yellow);
+	--button-warning-hover-bg: var(--dt-yellow);
+	--button-on-accent-fg: var(--dt-good-fg);
+
+	--karma-good: var(--dt-green);
+	--karma-bad: var(--dt-red);
+	--karma-warning: var(--dt-yellow);
+	--karma-severe: var(--dt-orange);
+	--karma-important: var(--dt-purple);
+	--karma-note: var(--dt-cyan);
+	--karma-info: var(--dt-overlay);
+	--karma-old: var(--dt-muted);
+
+	--karma-good-fg: var(--dt-green);
+	--karma-bad-fg: var(--dt-red);
+	--karma-warning-fg: var(--dt-yellow);
+	--karma-severe-fg: var(--dt-orange);
+	--karma-important-fg: var(--dt-purple);
+	--karma-note-fg: var(--dt-cyan);
+	--karma-info-fg: var(--dt-muted);
+	--karma-old-fg: var(--dt-muted);
+}
+
+html[data-theme="light"] {
+	color-scheme: light;
+
+	--dt-background: #fffbeb;
+	--dt-surface: #ece9df;
+	--dt-overlay: #dedccf;
+	--dt-border: #ceccc0;
+	--dt-foreground: #1f1f1f;
+	--dt-muted: #6c664b;
+	--dt-selection: #cfcfde;
+	--dt-cyan: #036a96;
+	--dt-green: #14710a;
+	--dt-orange: #a34d14;
+	--dt-pink: #a3144d;
+	--dt-purple: #644ac9;
+	--dt-red: #cb3a2a;
+	--dt-yellow: #846e15;
+	--dt-accent: var(--dt-pink);
+	--dt-shadow-strong: rgba(31, 31, 31, 0.16);
+	--dt-good-fg: var(--dt-background);
+	--dt-bad-fg: var(--dt-background);
+	--dt-warning-fg: var(--dt-background);
+
+	--body-bg-color: var(--dt-background);
+	--surface-bg-color: var(--dt-surface);
+	--standout-bg-color: var(--dt-surface);
+	--section-header-bg-color: var(--dt-surface);
+	--shadow-color: var(--dt-shadow-strong);
+
+	--text-color: var(--dt-foreground);
+	--muted-text-color: var(--dt-muted);
+	--annotation-key-color: var(--dt-muted);
+	--link-color: var(--dt-accent);
+	--border-color: var(--dt-border);
+
+	--hover-background-color: var(--dt-selection);
+	--hover-text-color: var(--dt-foreground);
+
+	--header-bg-color: var(--dt-surface);
+	--header-fg-color: var(--dt-foreground);
+	--header-border-color: var(--dt-border);
+	--header-shadow: none;
+	--header-hover-background-color: var(--dt-overlay);
+	--header-hover-text-color: var(--dt-foreground);
+	--header-button-hover-bg-color: var(--dt-overlay);
+
+	--sidebar-bg-color: var(--dt-surface);
+	--sidebar-link-color: var(--dt-foreground);
+	--sidebar-hover-bg-color: var(--dt-selection);
+	--sidebar-border-color: var(--dt-border);
+
+	--input-bg-color: var(--dt-background);
+	--input-fg-color: var(--dt-foreground);
+	--control-option-bg-color: var(--dt-overlay);
+	--control-hover-bg-color: var(--dt-selection);
+	--menu-hover-bg-color: var(--dt-selection);
+
+	--table-row-hover-bg: var(--dt-selection);
+	--table-row-hover-fg: var(--dt-foreground);
+	--table-uneditable-bg: var(--dt-overlay);
+	--footer-chip-bg-color: var(--dt-overlay);
+
+	--disabled-background-color: var(--dt-overlay);
+	--disabled-text-color: var(--dt-muted);
+
+	--button-good-bg: var(--dt-green);
+	--button-good-hover-bg: var(--dt-green);
+	--button-bad-bg: var(--dt-red);
+	--button-bad-hover-bg: var(--dt-red);
+	--button-warning-bg: var(--dt-yellow);
+	--button-warning-hover-bg: var(--dt-yellow);
+	--button-on-accent-fg: var(--dt-good-fg);
+
+	--karma-good: var(--dt-green);
+	--karma-bad: var(--dt-red);
+	--karma-warning: var(--dt-yellow);
+	--karma-severe: var(--dt-orange);
+	--karma-important: var(--dt-purple);
+	--karma-note: var(--dt-cyan);
+	--karma-info: var(--dt-overlay);
+	--karma-old: var(--dt-muted);
+
+	--karma-good-fg: var(--dt-green);
+	--karma-bad-fg: var(--dt-red);
+	--karma-warning-fg: var(--dt-yellow);
+	--karma-severe-fg: var(--dt-orange);
+	--karma-important-fg: var(--dt-purple);
+	--karma-note-fg: var(--dt-cyan);
+	--karma-info-fg: var(--dt-muted);
+	--karma-old-fg: var(--dt-muted);
+}

package/supplemental-themes/gruvbox-dark-light/theme.css

@@ -0,0 +1,199 @@
+/*
+ * Gruvbox (Dark+Light) supplemental theme for PicoCrank / Femtocrank.
+ * Palette: https://github.com/morhetz/gruvbox (medium contrast)
+ *
+ * Dark mode (header toggle) uses Gruvbox Dark; light mode uses Gruvbox Light.
+ *
+ * Asset URLs must be absolute, e.g.:
+ *   background-image: url('/supplemental-themes/gruvbox-dark-light/background.png');
+ */
+
+html[data-theme="dark"] {
+	color-scheme: dark;
+
+	--gb-bg0: #282828;
+	--gb-bg0-hard: #1d2021;
+	--gb-bg1: #3c3836;
+	--gb-bg2: #504945;
+	--gb-bg3: #665c54;
+	--gb-bg4: #7c6f64;
+	--gb-fg0: #fbf1c7;
+	--gb-fg1: #ebdbb2;
+	--gb-fg2: #d5c4a1;
+	--gb-fg3: #bdae93;
+	--gb-fg4: #a89984;
+	--gb-gray: #928374;
+	--gb-red: #fb4934;
+	--gb-green: #b8bb26;
+	--gb-yellow: #fabd2f;
+	--gb-blue: #83a598;
+	--gb-purple: #d3869b;
+	--gb-aqua: #8ec07c;
+	--gb-orange: #fe8019;
+	--gb-accent: var(--gb-blue);
+	--gb-shadow-strong: rgba(29, 32, 33, 0.9);
+	--gb-good-fg: var(--gb-bg0-hard);
+
+	--body-bg-color: var(--gb-bg0);
+	--surface-bg-color: var(--gb-bg1);
+	--standout-bg-color: var(--gb-bg1);
+	--section-header-bg-color: var(--gb-bg1);
+	--shadow-color: var(--gb-shadow-strong);
+
+	--text-color: var(--gb-fg0);
+	--muted-text-color: var(--gb-fg3);
+	--annotation-key-color: var(--gb-fg3);
+	--link-color: var(--gb-accent);
+	--border-color: var(--gb-bg3);
+
+	--hover-background-color: var(--gb-bg2);
+	--hover-text-color: var(--gb-fg0);
+
+	--header-bg-color: var(--gb-bg0-hard);
+	--header-fg-color: var(--gb-fg0);
+	--header-border-color: var(--gb-bg2);
+	--header-shadow: none;
+	--header-hover-background-color: var(--gb-bg2);
+	--header-hover-text-color: var(--gb-fg0);
+	--header-button-hover-bg-color: var(--gb-bg2);
+
+	--sidebar-bg-color: var(--gb-bg1);
+	--sidebar-link-color: var(--gb-fg0);
+	--sidebar-hover-bg-color: var(--gb-bg2);
+	--sidebar-border-color: var(--gb-bg2);
+
+	--input-bg-color: var(--gb-bg0);
+	--input-fg-color: var(--gb-fg0);
+	--control-option-bg-color: var(--gb-bg2);
+	--control-hover-bg-color: var(--gb-bg2);
+	--menu-hover-bg-color: var(--gb-bg2);
+
+	--table-row-hover-bg: var(--gb-bg2);
+	--table-row-hover-fg: var(--gb-fg0);
+	--table-uneditable-bg: var(--gb-bg2);
+	--footer-chip-bg-color: var(--gb-bg2);
+
+	--disabled-background-color: var(--gb-bg2);
+	--disabled-text-color: var(--gb-gray);
+
+	--button-good-bg: var(--gb-green);
+	--button-good-hover-bg: var(--gb-green);
+	--button-bad-bg: var(--gb-red);
+	--button-bad-hover-bg: var(--gb-red);
+	--button-warning-bg: var(--gb-yellow);
+	--button-warning-hover-bg: var(--gb-yellow);
+	--button-on-accent-fg: var(--gb-good-fg);
+
+	--karma-good: var(--gb-green);
+	--karma-bad: var(--gb-red);
+	--karma-warning: var(--gb-yellow);
+	--karma-severe: var(--gb-orange);
+	--karma-important: var(--gb-purple);
+	--karma-note: var(--gb-aqua);
+	--karma-info: var(--gb-bg2);
+	--karma-old: var(--gb-gray);
+
+	--karma-good-fg: var(--gb-green);
+	--karma-bad-fg: var(--gb-red);
+	--karma-warning-fg: var(--gb-yellow);
+	--karma-severe-fg: var(--gb-orange);
+	--karma-important-fg: var(--gb-purple);
+	--karma-note-fg: var(--gb-aqua);
+	--karma-info-fg: var(--gb-fg3);
+	--karma-old-fg: var(--gb-fg4);
+}
+
+html[data-theme="light"] {
+	color-scheme: light;
+
+	--gb-bg0: #fbf1c7;
+	--gb-bg0-hard: #f9f5d7;
+	--gb-bg1: #ebdbb2;
+	--gb-bg2: #d5c4a1;
+	--gb-bg3: #bdae93;
+	--gb-bg4: #a89984;
+	--gb-fg0: #282828;
+	--gb-fg1: #3c3836;
+	--gb-fg2: #504945;
+	--gb-fg3: #665c54;
+	--gb-fg4: #7c6f64;
+	--gb-gray: #928374;
+	--gb-red: #9d0006;
+	--gb-green: #79740e;
+	--gb-yellow: #b57614;
+	--gb-blue: #076678;
+	--gb-purple: #8f3f71;
+	--gb-aqua: #427b58;
+	--gb-orange: #af3a03;
+	--gb-accent: var(--gb-blue);
+	--gb-shadow-strong: rgba(40, 40, 40, 0.16);
+	--gb-good-fg: var(--gb-bg0);
+
+	--body-bg-color: var(--gb-bg0);
+	--surface-bg-color: var(--gb-bg1);
+	--standout-bg-color: var(--gb-bg1);
+	--section-header-bg-color: var(--gb-bg1);
+	--shadow-color: var(--gb-shadow-strong);
+
+	--text-color: var(--gb-fg0);
+	--muted-text-color: var(--gb-fg3);
+	--annotation-key-color: var(--gb-fg3);
+	--link-color: var(--gb-accent);
+	--border-color: var(--gb-bg3);
+
+	--hover-background-color: var(--gb-bg2);
+	--hover-text-color: var(--gb-fg0);
+
+	--header-bg-color: var(--gb-bg0-hard);
+	--header-fg-color: var(--gb-fg0);
+	--header-border-color: var(--gb-bg2);
+	--header-shadow: none;
+	--header-hover-background-color: var(--gb-bg2);
+	--header-hover-text-color: var(--gb-fg0);
+	--header-button-hover-bg-color: var(--gb-bg2);
+
+	--sidebar-bg-color: var(--gb-bg1);
+	--sidebar-link-color: var(--gb-fg0);
+	--sidebar-hover-bg-color: var(--gb-bg2);
+	--sidebar-border-color: var(--gb-bg2);
+
+	--input-bg-color: var(--gb-bg0);
+	--input-fg-color: var(--gb-fg0);
+	--control-option-bg-color: var(--gb-bg2);
+	--control-hover-bg-color: var(--gb-bg2);
+	--menu-hover-bg-color: var(--gb-bg2);
+
+	--table-row-hover-bg: var(--gb-bg2);
+	--table-row-hover-fg: var(--gb-fg0);
+	--table-uneditable-bg: var(--gb-bg2);
+	--footer-chip-bg-color: var(--gb-bg2);
+
+	--disabled-background-color: var(--gb-bg2);
+	--disabled-text-color: var(--gb-gray);
+
+	--button-good-bg: var(--gb-green);
+	--button-good-hover-bg: var(--gb-green);
+	--button-bad-bg: var(--gb-red);
+	--button-bad-hover-bg: var(--gb-red);
+	--button-warning-bg: var(--gb-yellow);
+	--button-warning-hover-bg: var(--gb-yellow);
+	--button-on-accent-fg: var(--gb-good-fg);
+
+	--karma-good: var(--gb-green);
+	--karma-bad: var(--gb-red);
+	--karma-warning: var(--gb-yellow);
+	--karma-severe: var(--gb-orange);
+	--karma-important: var(--gb-purple);
+	--karma-note: var(--gb-aqua);
+	--karma-info: var(--gb-bg2);
+	--karma-old: var(--gb-gray);
+
+	--karma-good-fg: var(--gb-green);
+	--karma-bad-fg: var(--gb-red);
+	--karma-warning-fg: var(--gb-yellow);
+	--karma-severe-fg: var(--gb-orange);
+	--karma-important-fg: var(--gb-purple);
+	--karma-note-fg: var(--gb-aqua);
+	--karma-info-fg: var(--gb-fg3);
+	--karma-old-fg: var(--gb-fg4);
+}

package/supplemental-themes/index.json

@@ -0,0 +1,17 @@
+{
+  "themes": [
+    {
+      "id": "catppuccin-latte-frappe",
+      "label": "Catppuccin Latte / Frappé"
+    },
+    {
+      "id": "dracula-alucard",
+      "label": "Dracula / Alucard"
+    },
+    {
+      "id": "gruvbox-dark-light",
+      "label": "Gruvbox (Dark+Light)"
+    },
+    "waffles"
+  ]
+}