Add dark mode colours for landing page

colepeters · colepeters · commit cfb85b4515e4 · 2024-05-07T11:30:47.000-05:00
diff --git a/public/css/landing-syntax.min.css b/public/css/landing-syntax.min.css
diff --git a/src/http/get-index/index.mjs b/src/http/get-index/index.mjs
@@ -62,8 +62,8 @@ export async function handler () {
       }
 
       body {
-        background-color: #efefef;
-        color: var(--body);
+        background-color: var(--back);
+        color: var(--fore);
         scrollbar-color: var(--gray-300) transparent;
         scrollbar-width: thin;
         overflow-x: clip;
diff --git a/src/views/landing/elements/arc-attribution.mjs b/src/views/landing/elements/arc-attribution.mjs
@@ -3,7 +3,7 @@ import arc from '@architect/functions'
 export default function ArcAttribution ({ html }) {
   return html`
     <style>
-      img {
+      svg {
         inline-size: clamp(120px, 10vw, 200px);
       }
     </style>
@@ -12,17 +12,25 @@ export default function ArcAttribution ({ html }) {
         <figure class="col-span-3-lg flex flex-col flex-row-lg gap0 align-items-center justify-content-between-lg">
           <p class="font-semibold text-1 uppercase tracking2">Open governance</p>
           <a href="https://openjsf.org/">
-            <img src="${arc.static('landing/openjs-foundation-logo.svg')}" alt="OpenJS Foundation" class="mi-auto" />
+            ${OpenJSFLogo()}
           </a>
         </figure>
         <figure class="hidden block-lg col-span-1-lg" aria-hidden="true"></figure>
         <figure class="col-span-3-lg flex flex-col flex-row-lg gap0 align-items-center-lg justify-content-between-lg">
           <p class="font-semibold text-1 uppercase tracking2">Sponsored development</p>
           <a href="https://begin.com">
-            <img src="${arc.static('landing/begin-logo.svg')}" alt="Begin" class="mi-auto" />
+            ${BeginLogo()}
           </a>
         </figure>
       </figure>
     </arc-container>
   `
 }
+
+function BeginLogo () {
+  return `<?xml version="1.0" encoding="UTF-8"?><svg class="mi-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 295.96 88.05"><defs><style>.cls-1{fill:currentColor;}</style></defs><g><path class="cls-1" d="M244.59,9.29c-3.32,0-6.04,2.73-6.04,6.12s2.73,5.97,6.04,5.97,6.04-2.73,6.04-5.97-2.65-6.12-6.04-6.12"/><path class="cls-1" d="M229.88,26.91h-5.96c-1.31,0-2.07,.87-2.5,1.92-.16,.38-.58,.55-.95,.37-2.82-1.35-5.93-2.17-9.07-2.17-11.91,0-21.42,10.29-20.12,22.47,.97,9.08,8.1,16.49,17.14,17.8,4.04,.58,7.89-.05,11.25-1.56h0c.83-.39,1.25-.1,1.3,.49-.14,7.26-3.85,10.48-10.41,10.48-3.6,0-6.38-1.61-7.92-4.11-.29-.47-.81-.74-1.36-.74h-7.83c-.83,0-1.47,.78-1.25,1.59,1.82,6.81,8.71,12.57,18.68,12.57,14.71,0,20.52-9.78,20.52-20.52V28.44c0-.84-.68-1.52-1.52-1.52m-18.48,30.4c-5.54,0-10.04-4.49-10.04-10.04s4.49-10.03,10.04-10.03,10.04,4.49,10.04,10.03-4.49,10.04-10.04,10.04"/><path class="cls-1" d="M123.73,27.25c-4.28-.62-8.34,.12-11.84,1.83-.34,.17-.73-.07-.73-.44V10.83c0-.85-.69-1.54-1.54-1.54h-7.34c-.85,0-1.54,.69-1.54,1.54v54.52c0,.84,.69,1.53,1.53,1.53h6.49c.92,0,1.7-.56,2.05-1.35,.12-.28,.43-.4,.7-.26,2.77,1.43,5.91,2.25,9.24,2.25,11.91,0,21.42-10.29,20.12-22.47-.97-9.08-8.1-16.49-17.14-17.8m-2.98,30.06c-5.54,0-10.04-4.49-10.04-10.04s4.49-10.03,10.04-10.03,10.04,4.49,10.04,10.03-4.49,10.04-10.04,10.04"/><path class="cls-1" d="M291.82,34.26c-2.71-7.04-10.44-9.55-17.44-8.19-1.92,.37-3.78,1.04-5.48,2-.13,.07-.41,.29-.67,.47-.27,.13-.71,0-.83-.27-.34-.79-1.13-1.35-2.05-1.35h-.03s-.06-.01-.09-.01h-6.36c-.85,0-1.54,.69-1.54,1.54v36.94c0,.83,.67,1.5,1.5,1.5h7.59c.83,0,1.5-.67,1.5-1.5v-21.85c0-4.53,2.7-8.11,7.32-8.11,5.09,0,7.24,3.42,7.24,7.79v22.12c0,.86,.69,1.55,1.55,1.55h7.48c.86,0,1.55-.69,1.55-1.55v-23.95c0-2.42-.35-4.86-1.22-7.13"/><path class="cls-1" d="M248.34,26.91h-7.51c-.85,0-1.53,.69-1.53,1.53v36.9c0,.85,.69,1.53,1.53,1.53h7.51c.85,0,1.53-.69,1.53-1.53V28.44c0-.85-.69-1.53-1.53-1.53"/><path class="cls-1" d="M166.18,26.93c-11.94,0-20.85,10.41-20.12,21.97,.62,9.76,8.58,17.71,18.4,18.53h0c14.11,1.02,19.47-7.53,20.98-11.15,.32-.75-.25-1.58-1.07-1.58h-8.33c-.49,0-.94,.2-1.31,.52-4.29,3.81-10.16,2.85-10.92,2.7h-.07c-3.56-.83-6.43-3.4-7.65-6.74-.14-.38,.13-.78,.53-.78h27.9c.99,0,1.8-.79,1.8-1.77v-1.98c-.51-10.53-8.19-19.73-20.14-19.73m8.72,15.44h-17.26c-.4,0-.71-.34-.65-.71,.52-3.19,4.48-6.22,9.28-6.22s8.76,3.03,9.28,6.22c.06,.37-.25,.71-.65,.71"/></g><g><path class="cls-1" d="M35.04,17.11V3.18c0-.69-.61-1.23-1.3-1.14-6.17,.88-11.84,3.29-16.6,6.85-.55,.41-.6,1.23-.11,1.72l9.88,9.83c.38,.38,.96,.43,1.41,.15,1.78-1.08,3.74-1.89,5.82-2.39,.52-.12,.89-.57,.89-1.1Z"/><path class="cls-1" d="M21.42,25.91l-9.88-9.83c-.49-.49-1.31-.44-1.73,.11-3.57,4.74-6,10.38-6.88,16.52-.1,.68,.45,1.29,1.14,1.29h13.99c.53,0,.98-.37,1.11-.89,.5-2.07,1.32-4.02,2.4-5.79,.28-.45,.23-1.03-.15-1.41Z"/><path class="cls-1" d="M59.76,33.99h13.99c.69,0,1.24-.61,1.14-1.29-.88-6.14-3.31-11.78-6.88-16.52-.42-.55-1.24-.59-1.73-.11l-9.88,9.83c-.38,.38-.43,.95-.15,1.41,1.09,1.77,1.9,3.72,2.4,5.79,.12,.52,.57,.89,1.11,.89Z"/><path class="cls-1" d="M50.92,20.45l9.88-9.83c.49-.49,.45-1.31-.11-1.72-4.76-3.55-10.43-5.97-16.6-6.85-.68-.1-1.3,.45-1.3,1.14v13.92c0,.53,.37,.98,.89,1.1,2.08,.5,4.04,1.31,5.82,2.39,.46,.28,1.03,.22,1.41-.15Z"/><path class="cls-1" d="M58.66,42.6c-.5,2.07-1.32,4.02-2.4,5.79-.28,.45-.23,1.03,.15,1.41l9.88,9.83c.49,.49,1.31,.44,1.73-.11,3.57-4.74,6-10.38,6.88-16.52,.1-.68-.45-1.29-1.14-1.29h-13.99c-.53,0-.98,.37-1.11,.89Z"/><path class="cls-1" d="M17.03,65.09c-.49,.49-.45,1.31,.11,1.72,6.07,4.53,13.61,7.22,21.78,7.22s15.71-2.69,21.78-7.22c.55-.41,.6-1.23,.11-1.72l-21.08-20.97c-.45-.44-1.17-.44-1.62,0l-21.08,20.97Z"/><path class="cls-1" d="M18.08,41.71H4.07c-.69,0-1.24,.61-1.14,1.29,.88,6.14,3.31,11.78,6.88,16.52,.42,.55,1.24,.59,1.73,.11l9.9-9.85c.38-.38,.43-.95,.15-1.41-1.09-1.77-1.91-3.7-2.41-5.77-.13-.52-.57-.89-1.11-.89Z"/></g></svg>`
+}
+
+function OpenJSFLogo () {
+  return `<?xml version="1.0" encoding="UTF-8"?><svg class="mi-auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0px" y="0px" viewBox="0 0 1000 314.4" style="enable-background:new 0 0 1000 314.4;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:currentColor;} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="28.7654" y1="49.8307" x2="243.506" y2="264.5713"> <stop offset="0.2145" style="stop-color:#0075C9"></stop> <stop offset="0.7067" style="stop-color:#80BC00"></stop> <stop offset="1" style="stop-color:#FDE021"></stop> </linearGradient> <path class="st0" d="M271.4,78.1L137,0.5L136.1,0l-0.9,0.5L1.6,77.7l-0.7,0.4L0,78.6v157.2l0.9,0.5l134.4,77.6l0.9,0.5l0.9-0.5 l132.6-76.5l1.8-1l0.9-0.5V78.6L271.4,78.1z M122.7,20.1L89.8,77H24.1L122.7,20.1z M84.4,86.4L69,113.1L22.8,86.4H84.4z M72.4,125.8 l54.3,31.4l-54.3,31.4l-18.1-31.4L72.4,125.8z M64.4,121.2l-15.4,26.7L18.1,94.5L64.4,121.2z M10.7,100.3l32.9,56.9l-32.9,56.9 V100.3z M48.9,166.6l15.4,26.7l-46.2,26.7L48.9,166.6z M69,201.3L84.4,228H22.8L69,201.3z M24.1,237.4h65.7l32.9,56.9L24.1,237.4z M131.5,290.8l-30.8-53.4h30.8V290.8z M131.5,228H95.2l-18.1-31.4l54.3-31.4V228z M131.5,149.1l-54.3-31.4l18.1-31.4h36.2V149.1z M131.5,77h-30.8l30.8-53.4V77z M207.9,121.2l46.2-26.7l-30.8,53.4L207.9,121.2z M217.9,157.2l-18.1,31.4l-54.3-31.4l54.3-31.4 L217.9,157.2z M203.2,113.1l-15.4-26.7h61.6L203.2,113.1z M248.1,77h-65.7l-32.8-56.9L248.1,77z M140.8,23.6L171.6,77h-30.8V23.6z M140.8,86.4H177l18.1,31.4l-54.3,31.4V86.4z M140.8,165.3l54.3,31.4L177,228h-36.2V165.3z M140.8,237.4h30.8l-30.8,53.4V237.4z M149.6,294.3l32.8-56.9h65.7L149.6,294.3z M187.8,228l15.4-26.7l46.2,26.7H187.8z M207.9,193.2l15.4-26.7l30.8,53.4L207.9,193.2z M261.6,214.1l-32.9-56.9l32.9-56.9V214.1z"></path> <polygon class="st1" points="308.4,202.7 372.6,202.7 372.6,208.5 315,208.5 315,257 367.2,257 367.2,263 315,263 315,312.9 308.4,312.9 "></polygon> <path class="st1" d="M383.8,279.7c0-19,15.2-34.4,34.5-34.4c19.3,0,34.2,15.4,34.2,34.4c0,19-14.9,34.5-34.2,34.5 C399,314.2,383.8,298.7,383.8,279.7 M446,279.7c0-16.4-11.2-28.7-27.7-28.7c-16.5,0-28,12.3-28,28.7c0,16.4,11.5,28.9,28,28.9 C434.8,308.6,446,296.1,446,279.7"></path> <path class="st1" d="M469.9,288.5v-41.7h6.3v40.7c0,13.5,6.3,21.1,19,21.1c14.3,0,24.3-9.6,24.3-24.8v-37h6.3v66.2h-6.3l0.2-14.6 c-4.4,9.9-13.5,16-25.1,16C479.8,314.4,469.9,304.7,469.9,288.5"></path> <path class="st1" d="M543,246.8h6.3l-0.2,14.8c4.4-10,13.6-16.2,25.3-16.2c14.8,0,24.6,9.9,24.6,26.3v41.3h-6.3v-40.2 c0-13.6-6.3-21.6-19.1-21.6c-14.3,0-24.3,9.4-24.3,24.8v37H543V246.8z"></path> <path class="st1" d="M616.3,279.7c0-19.5,13.8-34.4,32.8-34.4c13.5,0,23.2,7.3,28,17.2v-66.6h6.3v117.1h-6.3l0.3-16.5 c-4.7,10.2-15.6,17.8-28.4,17.8C630.1,314.2,616.3,299.2,616.3,279.7 M677.6,279.7c0-16.4-11-28.7-27.7-28.7 c-16.4,0-26.9,12.3-26.9,28.7c0,16.4,10.5,28.9,26.9,28.9C666.6,308.6,677.6,296.1,677.6,279.7"></path> <path class="st1" d="M748,271.4c0-14.9-6.8-20.6-17.7-20.6c-10.1,0-16.9,4.2-21.6,11.4l-4.5-3.2c5.5-8.6,14.9-13.6,26.3-13.6 c13.6,0,23.8,8.3,23.8,25.5v42.2H748l0.3-10.2c-4.2,6.3-11.5,11.5-22.9,11.5c-15.1,0-25-7-25-20.3c0-13.1,11.5-19.3,24.2-19.3H748 V271.4z M725.4,279.9c-10.1,0-18.6,3.9-18.6,13.9c0,10.1,6.6,14.8,19.3,14.8c11,0,21.9-6.5,21.9-16.7v-12H725.4z"></path> <path class="st1" d="M782.5,295.4v-43.3h-10.4v-5.4h10.4v-23.2h6.3v23.2h19.1v5.4h-19.1v43.1c0,9.7,3.4,13.3,8.9,13.3 c5.8,0,8.1-2.3,10.5-4.9l4.1,3.9c-3.2,3.7-7.1,6.6-14.6,6.6C789.3,314.2,782.5,308.9,782.5,295.4"></path> <path class="st1" d="M829.5,218.2c0-3.1,2.6-5.4,5.4-5.4c2.8,0,5.4,2.3,5.4,5.4c0,3.2-2.6,5.3-5.4,5.3 C832.1,223.6,829.5,221.5,829.5,218.2 M831.8,246.8h6.3v66.2h-6.3V246.8z"></path> <path class="st1" d="M857.1,279.7c0-19,15.2-34.4,34.5-34.4c19.3,0,34.2,15.4,34.2,34.4c0,19-14.9,34.5-34.2,34.5 C872.4,314.2,857.1,298.7,857.1,279.7 M919.4,279.7c0-16.4-11.2-28.7-27.7-28.7c-16.5,0-28,12.3-28,28.7c0,16.4,11.5,28.9,28,28.9 C908.2,308.6,919.4,296.1,919.4,279.7"></path> <path class="st1" d="M943.9,246.8h6.3l-0.2,14.8c4.4-10,13.6-16.2,25.3-16.2c14.8,0,24.6,9.9,24.6,26.3v41.3h-6.3v-40.2 c0-13.6-6.3-21.6-19.1-21.6c-14.3,0-24.3,9.4-24.3,24.8v37h-6.3V246.8z"></path> <path class="st1" d="M308.4,73.1c0-41.4,31.8-71.3,71.7-71.3c39.6,0,71.5,29.8,71.5,71.3c0,41.4-31.9,71.3-71.5,71.3 C340.2,144.3,308.4,114.5,308.4,73.1 M429.4,73.1c0-29.6-20.4-51.9-49.4-51.9c-29,0-49.6,22.3-49.6,51.9c0,29.6,20.6,51.9,49.6,51.9 C409,124.9,429.4,102.7,429.4,73.1"></path> <path class="st1" d="M473.9,56.8h20.8l-0.6,15.9c5.5-10.6,15.7-17.8,30.4-17.8c22,0,39.8,18.6,39.8,44.5c0,25.9-18,44.9-40.2,44.9 c-14.3,0-24.5-6.9-29.4-16.5v58h-20.8V56.8z M543.1,99.4c0-15.5-9.4-26.1-24.3-26.1c-15.1,0-24.9,10.6-24.9,26.1 c0,16.1,9.8,26.7,24.9,26.7C533.8,126.2,543.1,115.6,543.1,99.4"></path> <path class="st1" d="M635,127c11.2,0,19.4-4.5,24.3-9.2l12,12.7c-8,8-19,13.9-36.1,13.9c-29.4,0-48.4-19-48.4-44.7 c0-25.5,20-44.7,45.7-44.7c29.2,0,45.7,21.6,44.3,51.7h-69C610.3,119,619.3,127,635,127 M656.1,92.3c-1.8-11.6-9-20.2-23.3-20.2 c-13.3,0-22.5,7.3-24.9,20.2H656.1z"></path> <path class="st1" d="M699.7,56.8h20.6l-0.4,15.9c5.3-11.2,16.1-17.8,29-17.8c19,0,32.1,13.5,32.1,36.7v50.8h-20.6V93.3 c0-12.3-5.7-19.4-17.8-19.4c-13.5,0-22.3,8.2-22.3,22v46.5h-20.6V56.8z"></path> <path class="st1" d="M803.5,120.9l17.6-10.8c4.9,8.8,10.6,14.9,20.8,14.9c11.6,0,19.2-5.5,19.2-21.6V3.7h21.6v100 c0,27.6-16.5,40.6-39.8,40.6C822.3,144.3,810.1,133.7,803.5,120.9"></path> <path class="st1" d="M904.9,115.6l17.8-9.8c6.5,10.8,14.9,19.4,31.8,19.4c14.1,0,24.1-7.6,24.1-19c0-12-8.2-17.4-23.3-24.1l-9.2-4.1 c-20.2-9-32.5-19.2-32.5-40.6c0-20.6,15.9-35.3,39-35.3C971,2,983.5,9,991.8,23.9l-16.9,10.4c-5.3-9.2-11.4-13.5-22.3-13.5 c-11,0-18,6.7-18,16.1c0,10.4,5.9,15.1,20,21.2l9,4.1c23.7,10.4,36.3,21.4,36.3,43.7c0,24.3-19,38.4-45.1,38.4 C928.5,144.3,912.6,131.3,904.9,115.6"></path> </svg>`
+}
diff --git a/src/views/landing/elements/arc-landing.mjs b/src/views/landing/elements/arc-landing.mjs
@@ -6,10 +6,16 @@ export default function ArcLanding ({ html }) {
       }
 
       nav {
-        background-color: var(--body);
+        background-color: var(--fore);
         color: white;
       }
 
+      @media (prefers-color-scheme: dark) {
+        nav {
+          background-color: #1e1d1a;
+        }
+      }
+
       nav arc-logo {
         inline-size: 128px;
       }
@@ -38,6 +44,13 @@ export default function ArcLanding ({ html }) {
         color: var(--arc-blue);
       }
 
+      @media (prefers-color-scheme: dark) {
+        h2 span,
+        h3 span {
+          color: var(--bright-blue);
+        }
+      }
+
       .measure {
         max-inline-size: 64ch;
       }
@@ -51,6 +64,12 @@ export default function ArcLanding ({ html }) {
         filter: blur(3px);
       }
 
+      @media (prefers-color-scheme: dark) {
+        arc-graphic {
+          opacity: 0.05;
+        }
+      }
+
       nav a svg {
         block-size: 1em;
         inline-size: auto;
diff --git a/src/views/landing/elements/arc-link-button.mjs b/src/views/landing/elements/arc-link-button.mjs
@@ -4,7 +4,7 @@ export default function ArcLinkButton ({ html }) {
       .linkButton {
         background: var(--blue-600);
         border-radius: 0.5em;
-        box-shadow: 0 0 0 4px #efefef;
+        box-shadow: 0 0 0 4px var(--back);
         color: white;
         transition: background-color 0.15s linear;
       }
diff --git a/src/views/landing/elements/arc-terminal.mjs b/src/views/landing/elements/arc-terminal.mjs
@@ -15,6 +15,17 @@ export default function ArcTerminal ({ html }) {
         padding: 0.5em 1em;
       }
 
+      @media (prefers-color-scheme: dark) {
+        figure {
+          background: #222;
+          border-color: #444;
+        }
+
+        .process {
+          border-color: #444;
+        }
+      }
+
       .dot:first-of-type { color: salmon; }
       .dot:nth-of-type(2) { color: goldenrod; }
       .dot:nth-of-type(3) { color: mediumseagreen; }
@@ -24,6 +35,12 @@ export default function ArcTerminal ({ html }) {
         color: var(--blue-500);
       }
 
+      @media (prefers-color-scheme: dark) {
+        [slot="command"] {
+          color: var(--bright-blue);
+        }
+      }
+
       [slot="output"] {
         color: var(--gray-400);
       }
diff --git a/src/views/landing/elements/manifest-examples.mjs b/src/views/landing/elements/manifest-examples.mjs
@@ -31,6 +31,12 @@ export default function CloudFormation ({ html }) {
         cursor: pointer;
       }
 
+      @media (prefers-color-scheme: dark) {
+        label {
+          background-color: var(--arc-blue);
+        }
+      }
+
       form:has([value="hello-world"]:checked) ~ #hello-world,
       form:has([value="arc-codes"]:checked) ~ #arc-codes,
       form:has([value="kitchen-sink"]:checked) ~ #kitchen-sink {
diff --git a/theme.json b/theme.json
@@ -21,11 +21,17 @@
     "sans": "Montserrat,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif"
   },
   "theme": {
-    "blue": "#4075bf"
+    "blue": "#4075bf",
+    "fore": "#45413a",
+    "back": "#efefef",
+    "dark": {
+      "fore": "#efefef",
+      "back": "#24231e"
+    }
   },
   "color": {
     "arc-blue": "#365c91",
-    "body": "#45413a"
+    "bright-blue": "#4785ff"
   },
   "properties": {},
   "grid": {

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ export default function ArcLinkButton ({ html }) {`
`4`	`4`	`.linkButton {`
`5`	`5`	`background: var(--blue-600);`
`6`	`6`	`border-radius: 0.5em;`
`7`		`- box-shadow: 0 0 0 4px #efefef;`
	`7`	`+ box-shadow: 0 0 0 4px var(--back);`
`8`	`8`	`color: white;`
`9`	`9`	`transition: background-color 0.15s linear;`
`10`	`10`	`}`