Refactor scrollycode themes into CSS custom properties and add odoc shell plugins

Three-layer architecture separating content, theme, and renderer:

Phase 1 — Scrollycode refactor:
- Strip ~1030 lines of embedded theme CSS from scrollycode_extension.ml
- Create scrollycode_css.ml with structural CSS using CSS custom properties
- Create scrollycode_themes.ml with three theme files (warm/dark/notebook)
registered as support files
- Simplify @scrolly tag: theme suffix now ignored (CSS concern, not content)
- Playground overlay styled via --xo-* custom properties on x-ocaml element

Phase 2 — Extra CSS support:
- Add --extra-css flag to odoc html-generate for injecting additional
<link> tags (used for per-page theme selection)

Phase 3 — Shell plugin system:
- Add Html_shell module with Shell interface and hashtable registry
- Register "default" shell in html_page.ml, "json" shell in
html_fragment_json.ml
- Replace hardcoded if/else in generator.ml with shell registry lookup
- Add --shell NAME flag (--as-json kept as backward-compat alias)

x-ocaml theming:
- Replace hardcoded colors in style.css with var(--xo-*, fallback)
covering editor, gutter, buttons, tooltips, and output areas
- CSS custom properties inherit through shadow DOM boundary, so
consumers theme x-ocaml with pure CSS — no JS injection needed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Jon Ludlam's Agent 3 months ago 53bb8923 3a978d14

+28 -19

1 changed file

expand all

src

style.css

+28 -19

src/style.css

··· 1 - :host { display: block; position: relative; font-family: monospace; font-size: 1.2em } 2 - .cm-editor.cm-focused { outline: 1px dotted #AAA !important } 1 + :host { display: block; position: relative; font-family: var(--xo-font, monospace); font-size: var(--xo-font-size, 1.2em) } 2 + .cm-editor { background: var(--xo-bg, transparent); color: var(--xo-text, inherit); } 3 + .cm-editor.cm-focused { outline: 1px dotted var(--xo-focus-outline, #AAA) !important } 4 + .cm-gutters { background: var(--xo-gutter-bg, inherit) !important; color: var(--xo-gutter-text, #6c6c6c) !important; border-right: 1px solid var(--xo-gutter-border, #ddd) !important; } 5 + .cm-cursor { border-left-color: var(--xo-text, currentColor) !important; } 6 + .cm-selectionBackground { background: var(--xo-selection, #AAA4) !important; } 7 + .cm-focused .cm-selectionBackground { background: var(--xo-selection-focused, #AAA6) !important; } 8 + .cm-tooltip { background: var(--xo-tooltip-bg, #fff) !important; color: var(--xo-tooltip-text, #333) !important; border: 1px solid var(--xo-tooltip-border, #ddd) !important; } 3 9 .cm-tooltip-section { 4 10 max-width: 400px; 5 11 height: 1lh; 6 12 text-overflow: ellipsis; /* not working, because width/height must be px(?) */ 7 13 padding: 0.3em 0.5em; 8 14 overflow: hidden; 15 + color: var(--xo-tooltip-text, #333); 9 16 } 10 - .cm-lineNumbers { min-width: 30px } 11 - .cm-activeLine, .cm-activeLineGutter { background: transparent !important } 17 + .cm-lineNumbers { min-width: var(--xo-line-numbers-min-width, 30px) } 18 + .cm-lineNumbers .cm-gutterElement { padding: var(--xo-gutter-element-padding, 0 3px 0 5px) !important; } 19 + .cm-content { padding-left: var(--xo-content-padding-left, 0) !important; } 20 + .cm-activeLine, .cm-activeLineGutter { background: var(--xo-active-line, transparent) !important } 12 21 .cm-focused .cm-activeLine, 13 22 .cm-focused .cm-activeLineGutter 14 23 { 15 - background: #AAA2 !important; 24 + background: var(--xo-active-line-focused, #AAA2) !important; 16 25 } 17 26 18 27 .run_btn { ··· 30 39 height: calc(2 * var(--radius)); 31 40 padding-left: 0.4rem; 32 41 padding-right: 0.4rem; 33 - background-color: #F5F5F5; 34 - border: 1px solid #6D6D6D; 35 - color: #6D6D6D; 42 + background-color: var(--xo-btn-bg, #F5F5F5); 43 + border: 1px solid var(--xo-btn-border, #6D6D6D); 44 + color: var(--xo-btn-text, #6D6D6D); 36 45 } 37 - .run_btn button:hover { background-color: #6D6D6D; color: #F5F5F5; } 38 - .run_btn button:hover::after { border-color: transparent transparent transparent #F5F5F5; } 46 + .run_btn button:hover { background-color: var(--xo-btn-hover-bg, #6D6D6D); color: var(--xo-btn-hover-text, #F5F5F5); } 47 + .run_btn button:hover::after { border-color: transparent transparent transparent var(--xo-btn-hover-text, #F5F5F5); } 39 48 .run_btn button::after { 40 49 content: ""; 41 50 display: inline-block; ··· 47 56 --radius: 0.35rem; 48 57 width: calc(2 * var(--radius)); 49 58 height: calc(2 * var(--radius)); 50 - border-color: transparent transparent transparent #6D6D6D; 59 + border-color: transparent transparent transparent var(--xo-btn-text, #6D6D6D); 51 60 border-style: solid; 52 61 border-width: var(--radius) 0 var(--radius) calc(2 * var(--radius)); 53 62 } 54 63 55 64 .caml_stdout { 56 - background: #E8F6FF; 57 - color: #141A6A; 65 + background: var(--xo-stdout-bg, #E8F6FF); 66 + color: var(--xo-stdout-text, #141A6A); 58 67 margin: 0; 59 68 padding: 0.2em 0.2em; 60 69 padding-left: 0.7em; 61 70 } 62 71 .caml_stderr { 63 - background: #FDEEEE; 64 - color: #EB5656; 72 + background: var(--xo-stderr-bg, #FDEEEE); 73 + color: var(--xo-stderr-text, #EB5656); 65 74 margin: 0; 66 75 padding: 0.2em 0.2em; 67 76 padding-left: 0.7em; ··· 70 79 margin: 0; 71 80 padding: 0.2em 0.5em; 72 81 font-style: italic; 73 - color: #444; 82 + color: var(--xo-meta-text, #444); 74 83 padding-bottom: 0.5em; 75 - background: #eee; 84 + background: var(--xo-meta-bg, #eee); 76 85 } 77 86 .caml_html { 78 87 margin: 0; 79 88 padding: 0.2em 0.5em; 80 - color: black; 89 + color: var(--xo-text, black); 81 90 border: 1px solid transparent; 82 91 white-space: collapse; 83 92 } 84 93 85 94 table, tr, td, th { 86 - border: 1px solid black; 95 + border: 1px solid var(--xo-text, black); 87 96 border-collapse: collapse; 88 97 padding: 0.2em; 89 98 }

Configure Feed

Configure Feed