docs: dark mode

docs/_includes/layouts/base.njk

@@ -10,27 +10,26 @@
 
     <link rel="stylesheet" href="/styles/styles.css">
 
-   {# On browsers that don't yet support native declarative shadow DOM, a
-      paint can occur after some or all pre-rendered HTML has been parsed,
-      but before the declarative shadow DOM polyfill has taken effect. This
-      paint is undesirable because it won't include any component shadow DOM.
-      To prevent layout shifts that can result from this render, we use a
-      "dsd-pending" attribute to ensure we only paint after we know
-      shadow DOM is active. #}
+    {#- On browsers that don't yet support native declarative shadow DOM, a
+       paint can occur after some or all pre-rendered HTML has been parsed,
+       but before the declarative shadow DOM polyfill has taken effect. This
+       paint is undesirable because it won't include any component shadow DOM.
+       To prevent layout shifts that can result from this render, we use a
+       "dsd-pending" attribute to ensure we only paint after we know
+       shadow DOM is active. -#}
     <style>
       body[dsd-pending] {
         display: none;
       }
     </style>
-    {# if javascript is turned off we want to ensure the page renders #}
+    {#- if javascript is turned off we want to ensure the page renders -#}
     <noscript>
       <style type="text/css">
         body[dsd-pending] {
           display: grid;
         }
       </style>
     </noscript>
-
     {% include "../partials/javascript/global.html" %}
   </head>
 

docs/_includes/partials/component/masthead.njk

@@ -1,5 +1,13 @@
+<script type="module" data-helmet>
+  import '@uxdot/elements/uxdot-masthead.js';
+</script>
+
 <uxdot-masthead role="banner">
-  <button slot="hamburger" id="hamburger" aria-controls="sidebar" aria-expanded="false" aria-label="Expand Main Navigation">
+  <button slot="hamburger"
+          id="hamburger"
+          aria-controls="sidebar"
+          aria-expanded="false"
+          aria-label="Expand Main Navigation">
     <rh-icon set="ui" icon="menu-bars" size="lg"></rh-icon>
   </button>
   <a href="/" slot="logo">
@@ -9,5 +17,8 @@
     <span class="display-xs">Contribute on Github</span>
     <rh-icon set="social" icon="github" size="lg"></rh-icon>
   </a>
-  <a href="https://github.com/RedHat-UX/red-hat-design-system/releases/tag/v{{ pkg.version }}" slot="links" title="Version {{pkg.version}}" aria-label="Version {{pkg.version}}">v{{ pkg.version }}</a>
+  <a href="https://github.com/RedHat-UX/red-hat-design-system/releases/tag/v{{ pkg.version }}"
+     slot="links"
+     title="Version {{pkg.version}}"
+     aria-label="Version {{pkg.version}}">v{{ pkg.version }}</a>
 </uxdot-masthead>

docs/_includes/partials/javascript/global.html

@@ -1,27 +1,52 @@
-  <script type="importmap">{{ importMap | dump(2) | safe }}</script>
+    <script type="importmap">{{ importMap | dump(2) | safe }}</script>
 
-  {# dsd polyfill needs to happen before hydration attempts #}
-  <script type="module">
-    import '/assets/javascript/dsd-polyfill.js';
-  </script>
+    {#- dsd polyfill needs to happen before hydration attempts -#}
+    <script type="module">
+      import '/assets/javascript/dsd-polyfill.js';
+    </script>
 
-  {# lit-element-hydrate-support needs to be included before lit is loaded #}
-  <script type="module">
-    import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
-  </script>
+    {#- lit-element-hydrate-support needs to be included before lit is loaded -#}
+    <script type="module">
+      import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
+    </script>
 
-  {# load all components #}
-  {% for tag in importElements %}
+    {#- load all components -#}
+    {% for tag in importElements %}
     <script type="module">import '@rhds/elements/{{tag}}/{{tag}}.js';</script>
-  {% endfor %}
+    {% endfor %}
 
-  {# only load components that need hydrated (aka interactivity) #}
-  <script type="module">
-    import '@uxdot/elements/uxdot-copy-permalink.js';
-    import '@uxdot/elements/uxdot-sidenav.js';
-    import '@uxdot/elements/uxdot-example.js';
-  </script>
+    {#- only load components that need hydrated (aka interactivity) -#}
+    <script type="module">
+      import '@uxdot/elements/uxdot-copy-permalink.js';
+      import '@uxdot/elements/uxdot-example.js';
+      import '@uxdot/elements/uxdot-masthead.js';
+      import '@uxdot/elements/uxdot-sidenav.js';
+    </script>
 
-  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
+    {#- pre-roll the color palette system, depending on user browser pref.
+        conceptually, this belongs in uxdot-masthead.ts, but we place it here to improve
+        the perceived performance -#}
+    <style>
+      :root {
+        background-color: var(--rh-color-surface);
+        @media (prefers-color-scheme: dark) {
+          --rh-color-surface: var(--rh-color-surface-darkest, #151515);
+          --context: dark;
+        }
+      }
+    </style>
+
+    <script type="module">
+      const masthead = document.querySelector('uxdot-masthead');
+      const medialist = matchMedia('(prefers-color-scheme: dark)');
+      medialist.addEventListener('change', onChangePreference);
+      function onChangePreference() {
+        masthead.isDarkMode = medialist.matches;
+      }
+      await masthead.updateComplete;
+      onChangePreference();
+    </script>
+
+    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
 
 

docs/_plugins/lit-ssr/lit.ts

@@ -58,6 +58,9 @@ export default async function(eleventyConfig: UserConfig, opts?: Options) {
           tsconfig,
         },
       });
+
+      // eslint-disable-next-line no-console
+      pool.on('error', console.error);
     });
 
     eleventyConfig.on('eleventy.after', async function() {
@@ -82,7 +85,7 @@ export default async function(eleventyConfig: UserConfig, opts?: Options) {
           : durationMs > 100 ? chalk.blue
           : chalk.green;
           // eslint-disable-next-line no-console
-          console.log(`${color(durationMs.toFixed(2).padEnd(8))} Rendered ${page.outputPath} in`);
+          console.log(`${color(durationMs.toFixed(2).padEnd(8))}ms to render ${page.outputPath}`);
         }
         return trimOuterMarkers(rendered);
       } else {

docs/_plugins/lit-ssr/worker.ts

@@ -26,6 +26,9 @@ const { imports, tsconfig } = Piscina.workerData as WorkerInitData;
 registerTS({ tsconfig });
 register('./lit-css-node.ts', import.meta.url);
 
+// @ts-expect-error: DOM shim
+globalThis.ElementInternals = class ElementInternals {};
+
 async function importModule(bareSpec: string) {
   const spec = pathToFileURL(resolve(process.cwd(), bareSpec)).href.replace('.js', '.ts');
   await import(spec);

docs/styles/styles.css

@@ -295,16 +295,6 @@
     top: unset;
   }
 
-  /**
-   * position masthead as fixed
-   * z-index: to float above scroll page content
-  */
-  uxdot-masthead {
-    position: fixed;
-    inset: 0;
-    z-index: var(--uxdot-masthead-z-index);
-  }
-
   /**
    * Sticky header pattern
    * progressive enhancement sticky, using :has()

elements/rh-switch/rh-switch.ts

@@ -107,14 +107,14 @@ export class RhSwitch extends LitElement {
 
   render() {
     const rtl = this.#dir.dir === 'rtl';
-    const { on = 'light', reversed, checked } = this;
+    const { on, reversed, checked } = this;
     const slots = html`
       <slot class="message" name="message-on" ?hidden="${!this.checked}"><span aria-hidden="true">${this.messageOn}</span></slot>
       <slot class="message" name="message-off" ?hidden="${this.checked}"><span aria-hidden="true">${this.messageOff}</span></slot>`;
     return html`
       <div id="container"
            part="container"
-           class="${classMap({ checked, on: true, [on]: true, rtl })}">
+           class="${classMap({ checked, on: true, [on ?? '']: !!on, rtl })}">
         ${reversed ? slots : ''}
         <div id="switch"
              part="switch">

uxdot/tsconfig.json

@@ -10,5 +10,10 @@
   ],
   "compilerOptions": {
     "composite": true
-  }
+  },
+  "references": [
+    {
+      "path": "../elements"
+    }
+  ]
 }

uxdot/uxdot-masthead.css

@@ -1,90 +1,100 @@
 :host {
   display: block;
-  background-color: var(--rh-color-surface-darkest);
-  color: var(--rh-color-text-primary-on-dark);
-  height: max-content;
-  container-type: inline-size;
-  container-name: host;
+
+  /**
+   * position masthead as fixed
+   * z-index: to float above scroll page content
+   */
+  position: fixed;
+  inset-inline: 0;
+  z-index: var(--uxdot-masthead-z-index);
 }
 
 #container {
   display: grid;
   column-gap: var(--rh-space-lg);
-  grid-template-columns: max-content 1fr max-content;
+  grid-template-areas: 'hamburger logo color links';
+  grid-template-columns: max-content 1fr max-content max-content;
   max-height: var(--uxdot-masthead-max-height, 72px);
-  margin-inline: var(--rh-space-md);
-  margin-block: var(--rh-space-lg);
+  padding-inline: var(--rh-space-md);
+  padding-block: var(--rh-space-lg);
+  background-color: var(--rh-color-surface);
+
+  @container (width >= 576px) {
+    gap: var(--rh-space-lg);
+    padding: var(--rh-space-lg);
+  }
 }
 
-slot[name='hamburger'] {
+#hamburger {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--rh-space-md);
   justify-content: center;
-}
 
-slot[name='hamburger']::slotted(button) {
-  color: var(--rh-color-text-primary-on-dark);
-  background-color: transparent;
-  border: none;
-  margin: 0;
-  padding: var(--rh-space-md);
-  line-height: 0 !important;
-}
+  &::slotted(button) {
+    color: var(--rh-color-text-primary-on-dark);
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: var(--rh-space-md);
+    line-height: 0 !important;
+  }
 
-slot[name='hamburger']:hover::slotted(button),
-slot[name='hamburger']::slotted(button:hover),
-slot[name='hamburger']::slotted(button:active),
-slot[name='hamburger']::slotted(button:focus) {
-  color: var(--rh-color-icon-subtle-hover);
-}
+  &:hover::slotted(button),
+  &::slotted(button:hover),
+  &::slotted(button:active),
+  &::slotted(button:focus) {
+    color: var(--rh-color-icon-subtle-hover);
+  }
 
-slot[name='hamburger']::slotted(button:focus) {
-  outline: var(--rh-border-width-md) solid var(--rh-color-border-interactive-on-dark);
-  border-radius: var(--rh-border-radius-default);
+  &::slotted(button:focus) {
+    outline: var(--rh-border-width-md) solid var(--rh-color-border-interactive-on-dark);
+    border-radius: var(--rh-border-radius-default);
+  }
 }
 
-slot[name='logo']::slotted(a) {
+#logo::slotted(a) {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-self: flex-start;
   gap: var(--rh-space-md);
 }
 
-slot[name='links'] {
-  --rh-icon-size: 24px;
-
+#color {
   display: flex;
-  flex-direction: row;
-  column-gap: var(--rh-space-lg);
+  align-items: center;
+  gap: 1em;
 }
 
-slot[name='links']::slotted(a) {
+#links {
+  --rh-icon-size: 24px;
+
   display: flex;
   flex-direction: row;
-  gap: var(--rh-space-lg);
-  align-items: center;
-}
+  column-gap: var(--rh-space-lg);
 
-@container (min-width: 576px) {
-  #container {
+  &::slotted(a) {
+    display: flex;
+    flex-direction: row;
     gap: var(--rh-space-lg);
-    margin: var(--rh-space-lg);
+    align-items: center;
   }
 }
 
-@container (min-width: 992px) {
+@container (width >= 992px) {
   #container {
-    grid-template-columns: 1fr max-content;
+    grid-template-areas: 'logo color links';
+    grid-template-columns: 1fr max-content max-content;
   }
 
-  slot[name='hamburger'] {
+  #hamburger {
     display: none;
   }
 
-  slot[name='logo']::slotted(a) {
+  #logo::slotted(a) {
     margin-inline-start: var(--rh-space-lg);
   }
 }