@saltcorn/bootstrap-prompt-theme 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/.claude/settings.local.json +10 -0
  2. package/LICENSE +21 -0
  3. package/README.md +81 -0
  4. package/generate_theme.js +74 -0
  5. package/index.js +719 -0
  6. package/package.json +37 -0
  7. package/public/bootstrap.bundle.min.js +7 -0
  8. package/public/bootstrap.min.css +6 -0
  9. package/public/fontawesome/fontawesome.min.css +4646 -0
  10. package/public/sidebar-3.css +143 -0
  11. package/public/webfonts/fa-brands-400.eot +0 -0
  12. package/public/webfonts/fa-brands-400.svg +3717 -0
  13. package/public/webfonts/fa-brands-400.ttf +0 -0
  14. package/public/webfonts/fa-brands-400.woff +0 -0
  15. package/public/webfonts/fa-brands-400.woff2 +0 -0
  16. package/public/webfonts/fa-regular-400.eot +0 -0
  17. package/public/webfonts/fa-regular-400.svg +801 -0
  18. package/public/webfonts/fa-regular-400.ttf +0 -0
  19. package/public/webfonts/fa-regular-400.woff +0 -0
  20. package/public/webfonts/fa-regular-400.woff2 +0 -0
  21. package/public/webfonts/fa-solid-900.eot +0 -0
  22. package/public/webfonts/fa-solid-900.svg +5034 -0
  23. package/public/webfonts/fa-solid-900.ttf +0 -0
  24. package/public/webfonts/fa-solid-900.woff +0 -0
  25. package/public/webfonts/fa-solid-900.woff2 +0 -0
package/.claude/settings.local.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "permissions": {
3
+ "allow": [
4
+ "Bash(git -C /home/christian/playground/workspaces/fork/bootstrap-prompt-theme log --oneline -3)",
5
+ "Bash(git -C /home/christian/playground/workspaces/fork/bootstrap-prompt-theme remote -v)",
6
+ "Bash(rm -rf .git)",
7
+ "Bash(git init:*)"
8
+ ]
9
+ }
10
+ }
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 Saltcorn
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,81 @@
1
+ # bootstrap-prompt-theme
2
+
3
+ A [Saltcorn](https://saltcorn.com/) layout plugin that uses an LLM to generate a CSS overlay on top of standard Bootstrap 5.3.
4
+
5
+ ## Relation to any-bootstrap-theme
6
+
7
+ This plugin is derived from [@saltcorn/any-bootstrap-theme](https://github.com/saltcorn/any-bootstrap-theme). The original plugin offers a large set of configuration variables (colors, card styles, link colors, etc.) that are fed into a Sass build to produce a fully compiled Bootstrap CSS file per theme.
8
+
9
+ This variant generates a lightweight CSS overlay on top of the Bootstrap 5.3 CSS by prompting an LLM. Bootstrap 5.3 exposes almost everything through CSS custom properties (`--bs-*`), so a well-written overlay can restyle the entire UI without recompiling Sass.
10
+
11
+ **Trade-offs:**
12
+ - Much simpler setup — no Sass toolchain, no build step
13
+ - The LLM can produce creative and complex themes from a plain-language description
14
+ - Configuration is minimal: a prompt, light/dark mode toggle, and basic layout options
15
+
16
+ ## Requirements
17
+
18
+ - Saltcorn with the `@saltcorn/large-language-model` plugin installed and configured
19
+
20
+ ## Configuration
21
+
22
+ 1. Go to **Plugins → bootstrap-prompt-theme → Configure**
23
+ 2. Enter a theme prompt describing the visual style you want
24
+ 3. Save — the CSS overlay is generated by the LLM, written to `public/overlay.<timestamp>.css`, and stored in the plugin configuration so it survives restarts
25
+
26
+ > **Note:** The generation step can take a noticeable amount of time, especially with a detailed prompt. This is normal — the save will complete once generation finishes.
27
+
28
+ ### Layout options
29
+
30
+ | Option | Description |
31
+ |---|---|
32
+ | Menu style | Top Navbar, Side Navbar, or No Menu |
33
+ | Navbar color scheme | Dark, Light, Transparent, etc. |
34
+ | Navbar Fixed Top | Pin the navbar to the top of the viewport |
35
+ | Top padding | 0–5, adjust to match navbar height |
36
+ | Fluid container | Full-width layout |
37
+ | Mode | `light` or `dark` — sets `data-bs-theme` on `<html>` |
38
+
39
+ ## Example prompt
40
+
41
+ ```
42
+ A clean corporate theme with a deep navy blue (#1a2744) navbar and sidebar,
43
+ white card backgrounds with a subtle box shadow, slate-grey body background (#f4f5f7),
44
+ and teal (#0d9488) as the primary accent color for buttons, links, and active states.
45
+ Use a sans-serif system font stack. In dark mode, use a near-black background (#0f1117)
46
+ with dark navy cards (#1a2133) and keep the teal accent.
47
+ Rounded corners on buttons (border-radius: 6px) and form inputs.
48
+ Table headers should have the navy background with white text.
49
+ ```
50
+
51
+
52
+ ## How the overlay works
53
+
54
+ The generated file sets CSS custom properties in `:root` that Bootstrap 5.3 reads at runtime:
55
+
56
+ ```css
57
+ :root {
58
+ --my-accent: #0d9488;
59
+
60
+ --bs-body-bg: #f4f5f7;
61
+ --bs-body-color: #1f2937;
62
+ --bs-primary: var(--my-accent);
63
+ --bs-link-color: var(--my-accent);
64
+ --bs-card-bg: #ffffff;
65
+ /* ... */
66
+ }
67
+
68
+ [data-bs-theme="dark"] {
69
+ --bs-body-bg: #0f1117;
70
+ --bs-card-bg: #1a2133;
71
+ /* ... */
72
+ }
73
+
74
+ .navbar { background-color: #1a2744 !important; }
75
+ .btn { border-radius: 6px; }
76
+ /* etc. */
77
+ ```
78
+
79
+ ## Licensing
80
+
81
+ MIT
package/generate_theme.js ADDED
@@ -0,0 +1,74 @@
1
+ const { getState } = require("@saltcorn/data/db/state");
2
+ const { join } = require("path");
3
+ const { writeFile, readdir, unlink } = require("fs").promises;
4
+
5
+ const writeOverlayCSS = async (css, filename = `overlay.${Date.now()}.css`) => {
6
+ const dest = join(__dirname, "public", filename);
7
+ await writeFile(dest, css);
8
+ return filename;
9
+ };
10
+
11
+ const deleteOldOverlays = async (keepFile) => {
12
+ const publicDir = join(__dirname, "public");
13
+ const files = await readdir(publicDir);
14
+ for (const file of files) {
15
+ if (/^overlay\.\d+\.css$/.test(file) && file !== keepFile)
16
+ await unlink(join(publicDir, file));
17
+ }
18
+ };
19
+
20
+ const SYSTEM_PROMPT = `You are an expert CSS theme designer for Bootstrap 5.3.
21
+ Your task is to generate a complete CSS overlay file that reskins a standard Bootstrap 5.3 app.
22
+
23
+ APPROACH:
24
+ 1. Define theme-specific custom properties in :root (colors, fonts, shadows, etc.)
25
+ 2. Override Bootstrap 5.3 CSS variables in :root using --bs-* tokens for light mode
26
+ 3. Add component-level CSS rules for deeper customisation (navbar, cards, buttons, forms, tables, alerts, badges, modals, pagination, tabs, accordions, etc.)
27
+ 4. Add a dark mode section scoped to [data-bs-theme="dark"] that overrides :root custom properties and --bs-* tokens for dark mode. Component-level rules that depend only on CSS variables will automatically adapt — only add extra component rules under [data-bs-theme="dark"] where variables alone are not sufficient.
28
+
29
+ BOOTSTRAP 5.3 CSS VARIABLES to consider overriding in :root and [data-bs-theme="dark"]:
30
+ --bs-body-bg, --bs-body-color, --bs-secondary-bg, --bs-tertiary-bg,
31
+ --bs-border-color, --bs-primary, --bs-link-color, --bs-link-hover-color,
32
+ --bs-card-bg, --bs-card-border-color, --bs-card-cap-bg,
33
+ --bs-dropdown-bg, --bs-dropdown-border-color, --bs-dropdown-link-color,
34
+ --bs-dropdown-link-hover-bg, --bs-dropdown-link-active-bg,
35
+ --bs-table-color, --bs-table-bg, --bs-table-border-color, --bs-table-hover-bg,
36
+ --bs-modal-bg, --bs-modal-border-color,
37
+ --bs-tooltip-bg, --bs-tooltip-color,
38
+ --bs-body-font-family, --bs-body-font-size
39
+
40
+ COMPONENTS to style: body, navbar (.navbar, .navbar-brand, .nav-link), cards (.card, .card-header, .card-footer, .card-title), buttons (.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-success), forms (.form-control, .form-select, .form-label, .form-check-input), tables (.table, .table th, .table td), alerts (.alert-*), badges (.badge), modals (.modal-content, .modal-header), pagination (.page-link), tabs (.nav-tabs), links (a), headings (h1-h6), code/pre, hr, scrollbar.
41
+
42
+ DARK MODE STRUCTURE:
43
+ :root { /* light mode theme variables and --bs-* overrides */ }
44
+ /* component rules */
45
+ [data-bs-theme="dark"] { /* dark mode theme variables and --bs-* overrides */ }
46
+ /* any extra component rules needed only in dark mode, prefixed with [data-bs-theme="dark"] */
47
+
48
+ CRITICAL RULES — never break these:
49
+ - Never set overflow:hidden on .navbar, .navbar-collapse, or any nav container — this clips dropdown menus
50
+ - Never set a z-index lower than 1000 on .navbar or its children — dropdowns must appear above page content
51
+ - Never create a new stacking context (transform, filter, will-change, isolation) on .navbar or its direct parents — this traps dropdowns inside it
52
+ - Do not override --bs-zindex-dropdown or .dropdown-menu z-index
53
+ - Navbar dropdowns must always be fully visible and appear above all other page content
54
+
55
+ OUTPUT: Only valid CSS. No explanations. No markdown. No code fences. Start directly with /* theme comment */ or :root {`;
56
+
57
+ const generateThemeCSS = async (prompt) => {
58
+ const state = getState();
59
+ if (!state.functions?.llm_generate) {
60
+ state.log(
61
+ 5,
62
+ "bootstrap-prompt-theme: llm_generate not available, is large-language-model installed?"
63
+ );
64
+ return null;
65
+ }
66
+ console.log("bootstrap-prompt-theme: generating theme from prompt...");
67
+ const result = await state.functions.llm_generate.run(prompt, {
68
+ systemPrompt: SYSTEM_PROMPT,
69
+ });
70
+ state.log(6, `bootstrap-prompt-theme: LLM result: ${result}`);
71
+ return result || null;
72
+ };
73
+
74
+ module.exports = { generateThemeCSS, writeOverlayCSS, deleteOldOverlays };