chore: add dark theme support

scripts/md2html/.gitignore

@@ -0,0 +1,2 @@
+*.err
+input.bs

scripts/md2html/main.css

@@ -0,0 +1,237 @@
+#respec-ui {
+    visibility: hidden;
+}
+
+#title {
+    color: #578000;
+}
+
+#subtitle {
+    color: #578000;
+}
+
+.dt-published {
+    color: #578000;
+}
+
+.dt-published::before {
+    content: "Published ";
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #578000;
+    font-weight: normal;
+    font-style: normal;
+}
+
+a[href] {
+    color: #45512c;
+}
+
+body:not(.toc-inline) #toc h2 {
+    color: #45512c;
+}
+
+table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+}
+
+table th {
+    font-weight: 600;
+}
+
+table th, table td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+}
+
+table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+}
+
+table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+}
+
+pre {
+    background-color: #f6f8fa !important;
+}
+
+code {
+    color: #c83500
+}
+
+th code {
+    color: inherit
+}
+
+a.bibref {
+    text-decoration: underline;
+}
+
+body.darkmode {
+    --toclink-underline: #6a9000;
+    --toclink-visited-underline: #fff;
+}
+
+body.darkmode a,
+body.darkmode .tocxref,
+body.darkmode .u-url {
+    color: #6a9000;
+}
+
+body.darkmode code {
+    color: #e66c33;
+}
+
+body.darkmode:not(.toc-inline) #toc h2,
+body.darkmode h1,
+body.darkmode h2,
+body.darkmode h3,
+body.darkmode h4,
+body.darkmode h5,
+body.darkmode h6,
+body.darkmode #title,
+body.darkmode #subtitle,
+body.darkmode .toc-inline,
+body.darkmode .dt-published {
+    color: #7bb01c;
+}
+
+body.darkmode pre,
+body.darkmode table tr:nth-child(2n),
+body.darkmode table tr {
+    background-color: #1e1e1e !important;
+    color: #dcdcdc;
+}
+
+body.darkmode img {
+    background: transparent;
+}
+
+body.darkmode .logo img {
+    display: none;
+}
+
+body.darkmode .logo::before {
+    content: "";
+    display: inline-block;
+    height: 48px;
+    width: 175px;
+    background: url("https://raw.githubusercontent.com/OAI/OpenAPI-Style-Guide/refs/heads/main/graphics/bitmap/OpenAPI_Logo_Pantone.png") no-repeat center / contain;
+    vertical-align: middle;
+}
+
+/** This contains the content of the https://www.w3.org/StyleSheets/TR/2021/dark.css file */
+body.darkmode {
+    --text: #ddd;
+    --bg: black;
+
+    /* Absolute URLs due to https://bugs.webkit.org/show_bug.cgi?id=230243 */
+    --unofficial-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-unofficial);
+    --draft-watermark: url(https://www.w3.org/StyleSheets/TR/2021/logos/UD-watermark-dark-draft);
+
+    --logo-bg: #1a5e9a;
+    --logo-active-bg: #c00;
+    --logo-text: white;
+
+    --tocnav-normal-text: #999;
+    --tocnav-normal-bg: var(--bg);
+    --tocnav-hover-text: var(--tocnav-normal-text);
+    --tocnav-hover-bg: #080808;
+    --tocnav-active-text: #f44;
+    --tocnav-active-bg: var(--tocnav-normal-bg);
+
+    --tocsidebar-text: var(--text);
+    --tocsidebar-bg: #080808;
+    --tocsidebar-shadow: rgba(255,255,255,.1);
+    --tocsidebar-heading-text: hsla(203,20%,40%,.7);
+
+    --toclink-text: var(--text);
+    --toclink-underline: #6af;
+    --toclink-visited-text: var(--toclink-text);
+    --toclink-visited-underline: #054572;
+
+    --heading-text: #8af;
+
+    --hr-text: var(--text);
+
+    --algo-border: #456;
+
+    --del-text: #f44;
+    --del-bg: transparent;
+    --ins-text: #4a4;
+    --ins-bg: transparent;
+
+    --a-normal-text: #6af;
+    --a-normal-underline: #555;
+    --a-visited-text: var(--a-normal-text);
+    --a-visited-underline: var(--a-normal-underline);
+    --a-hover-bg: rgba(25%, 25%, 25%, .2);
+    --a-active-text: #f44;
+    --a-active-underline: var(--a-active-text);
+
+    --borderedblock-bg: rgba(255, 255, 255, .05);
+
+    --blockquote-border: silver;
+    --blockquote-bg: var(--borderedblock-bg);
+    --blockquote-text: currentcolor;
+
+    --issue-border: #e05252;
+    --issue-bg: var(--borderedblock-bg);
+    --issue-text: var(--text);
+    --issueheading-text: hsl(0deg, 70%, 70%);
+
+    --example-border: hsl(50deg, 90%, 60%);
+    --example-bg: var(--borderedblock-bg);
+    --example-text: var(--text);
+    --exampleheading-text: hsl(50deg, 70%, 70%);
+
+    --note-border: hsl(120deg, 100%, 35%);
+    --note-bg: var(--borderedblock-bg);
+    --note-text: var(--text);
+    --noteheading-text: hsl(120, 70%, 70%);
+    --notesummary-underline: silver;
+
+    --advisement-border: orange;
+    --advisement-bg: #222218;
+    --advisement-text: var(--text);
+    --advisementheading-text: #f84;
+
+    --amendment-border: #330099;
+    --amendment-bg: var(--borderedblock-bg);
+    --amendment-text: var(--text);
+    --amendmentheading-text: #a086ff;
+
+    --amendment-border: #330099;
+    --amendment-bg: #080010;
+    --amendment-text: var(--text);
+    --amendmentheading-text: #cc00ff;
+
+    --warning-border: red;
+    --warning-bg: hsla(40,100%,20%,0.95);
+    --warning-text: var(--text);
+
+    --def-border: #8ccbf2;
+    --def-bg: #080818;
+    --def-text: var(--text);
+    --defrow-border: #136;
+
+    --datacell-border: silver;
+
+    --indexinfo-text: #aaa;
+
+    --indextable-hover-text: var(--text);
+    --indextable-hover-bg: #181818;
+
+    --outdatedspec-bg: rgba(255, 255, 255, .5);
+    --outdatedspec-text: black;
+    --outdated-bg: maroon;
+    --outdated-text: white;
+    --outdated-shadow: red;
+
+    --editedrec-bg: darkorange;
+}

scripts/md2html/md2html.js

@@ -93,32 +93,21 @@ function preface(title,options) {
 
     // SEO
     preface += `<meta charset="UTF-8">\n<title>${md.utils.escapeHtml(title)}</title>`;
+    preface += '<meta name="description" content="The Overlay Specification defines a document format for information that augments an existing OpenAPI description yet remains separate from the OpenAPI description\'s source document(s).">\n';
 
     // ReSpec
+    preface += '<meta name="color-scheme" content="light dark">';
     preface += '<script src="../js/respec-w3c.js" class="remove"></script>';
     preface += `<script class="remove">var respecConfig = ${JSON.stringify(respec)};</script>\n`;
     preface += '</head>\n<body>';
     preface += '<style>';
-    preface += '#respec-ui { visibility: hidden; }';
-    preface += '#title { color: #578000; } #subtitle { color: #578000; }';
-    preface += '.dt-published { color: #578000; } .dt-published::before { content: "Published "; }';
-    preface += 'h1,h2,h3,h4,h5,h6 { color: #578000; font-weight: normal; font-style: normal; }';
-    preface += 'a[href] { color: #45512c; }';
-    preface += 'body:not(.toc-inline) #toc h2 { color: #45512c; }';
-    preface += 'table { display: block; width: 100%; overflow: auto; }';
-    preface += 'table th { font-weight: 600; }';
-    preface += 'table th, table td { padding: 6px 13px; border: 1px solid #dfe2e5; }';
-    preface += 'table tr { background-color: #fff; border-top: 1px solid #c6cbd1; }';
-    preface += 'table tr:nth-child(2n) { background-color: #f6f8fa; }';
-    preface += 'pre { background-color: #f6f8fa !important; }';
-    preface += 'code { color: #c83500 } th code { color: inherit }';
-    preface += 'a.bibref { text-decoration: underline;}';
+    preface += fs.readFileSync(path.resolve(__dirname,'main.css'),'utf8').split(/\r?\n/).join(' ');
     preface += fs.readFileSync(path.resolve(__dirname,'gist.css'),'utf8').split(/\r?\n/).join(' ');
     preface += '</style>';
     preface += `<h1 id="title">${title.split('|')[0]}</h1>`;
     preface += `<p class="copyright">Copyright © ${options.publishDate.getFullYear()} the Linux Foundation</p>`;
-    preface += `<section class="notoc" id="abstract"><h2>${abstract}</h2>\n`;
-    preface += options.abstract.join('\n');
+    preface += `<section class="notoc" id="abstract"><h2>${abstract}</h2>`;
+    preface += 'The Overlay Specification defines a document format for information that augments an existing [[OpenAPI]] description yet remains separate from the OpenAPI description’s source document(s).';
     preface += '</section>';
     preface += '<section class="override" id="sotd" data-max-toc="0">';
     preface += '<h2>Status of This Document</h2>';
@@ -160,7 +149,7 @@ function getPublishDate(m) {
             let v = $(c[0]).text();
             let d = $(c[1]).text();
             argv.subtitle = v;
-            if (d !== 'TBD') result = new Date(d);
+            if (d !== 'TBA') result = new Date(d);
         }
     });
     return result;
@@ -181,24 +170,11 @@ let inTOC = false;
 let inDefs = false;
 let inCodeBlock = false;
 let indents = [0];
-let inAbstract = false;
-argv.abstract = [];
 
 // process the markdown
 for (let l in lines) {
     let line = lines[l];
 
-    // extract Abstract
-    if (line.startsWith('## Abstract')) { 
-        inAbstract = true;
-        line = '';
-    }
-    else if (line.startsWith('#')) inAbstract = false; 
-    else if (inAbstract) { 
-        argv.abstract.push(line);
-        line = '';
-    }
-
     // remove TOC from older spec versions, respec will generate a new one
     if (line.startsWith('## Table of Contents')) inTOC = true;
     else if (line.startsWith('#')) inTOC = false;
@@ -313,4 +289,5 @@ for (let l in lines) {
 
 s = preface(`Overlay Specification v${argv.subtitle} | Introduction, Definitions, & More`,argv)+'\n\n'+lines.join('\n');
 let out = md.render(s);
+out = out.replace(/\[([RGB])\]/g,'&#91;$1&#93;');
 console.log(out);

scripts/md2html/style-finish.html

@@ -0,0 +1 @@
+</style>

scripts/md2html/style-start.html

@@ -0,0 +1,5 @@
+<style>
+/*.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
+code.highlight { padding: .1em; border-radius: .3em; } */
+pre > code { background: hsl(24, 20%, 95%); display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
+h1,h2,h3 { color: #629b34; }a[href] { color: #45512c; }body:not(.toc-inline) #toc h2 { color: #45512c; }