feat: implement dark mode

Large CL that implements dark mode using mostly material 3's token system generated in monochrome with some site-specific additions
lit · Feb 28, 2024 · dad7a9d · dad7a9d
1 parent 563e508
commit dad7a9d
Show file tree

Hide file tree

Showing 70 changed files with 1,099 additions and 818 deletions.
diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js
@@ -501,6 +501,13 @@ ${content}
     )
   );
 
+  /**
+   * Inlines an SVG file.
+   */
+  eleventyConfig.addShortcode('inlineSvg', async (src) => {
+    return fsSync.readFileSync(`./site/${src}`, 'utf8');
+  });
+
   /**
    * Bundle, minify, and inline a CSS file. Path is relative to ./site/css/.
    *

diff --git a/packages/lit-dev-content/rollup.config.js b/packages/lit-dev-content/rollup.config.js
@@ -131,8 +131,9 @@ export default [
   // the asynchronously-loaded module bundles above.
   {
     input: [
+      'lib/global/apply-saved-theme.js',
       'lib/global/apply-mods.js',
-      'lib/global/initialize-typescript-attribute.js',
+      'lib/global/initialize-typescript-mode.js',
       'lib/global/mobile-drawer.js',
       'lib/global/dsd-polyfill.js',
     ],

diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html
@@ -8,17 +8,19 @@
     <meta name="description" content="Simple. Fast. Web Components.">
     <link rel="icon" href="{{ site.baseurl }}/images/flame-favicon.svg">
     <link rel="mask-icon" href="{{ site.baseurl }}/images/flame-favicon.svg" color="#324fff">
+    {% block preload %}{% endblock %}
     {% if not env.DEV %}
     <link rel="modulepreload" href="{{ site.baseurl }}/js/tslib.js">
     <link rel="modulepreload" href="{{ site.baseurl }}/js/lit.js">
     {% endif %}
     <link rel="modulepreload" href="{{ site.baseurl }}/js/global/hydrate-common-components.js">
 
+    {% inlinejs "global/apply-saved-theme.js" %}
+    {% inlinecss "colors.css" %}
     {% inlinecss "global.css" %}
 
-    {% inlinecss "mods.css" %}
     {% inlinejs "global/apply-mods.js" %}
-    {% inlinejs "global/initialize-typescript-attribute.js" %}
+    {% inlinejs "global/initialize-typescript-mode.js" %}
     {% inlinejs "global/mobile-drawer.js" %}
     {% if env.DEV %}
       <script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
@@ -49,13 +51,19 @@
     <noscript><style>body[dsd-pending] {display: block !important;}</style></noscript>
     {% block head %}{% endblock %}
   </head>
-  <body dsd-pending>
+  <body dsd-pending class="auto">
     <litdev-cookie-banner></litdev-cookie-banner>
     <mwc-drawer type="modal" id="mobileDrawer">
       <nav>
         <div id="mobileSiteNav">
-          <img src="{{ site.baseurl }}/images/flame-white.svg" alt="" width="24" height="30">
-          <ol>
+          <lazy-svg
+            loading="visible"
+            href="{{ site.baseurl }}/images/flame-white.svg#full"
+            svg-aria-hidden
+            width="24"
+            height="30">
+          </lazy-svg>
+          <ol id="mobile-site-controls">
             {% include 'site-nav.html' %}
           </ol>
         </div>

diff --git a/packages/lit-dev-content/site/_includes/docs-nav-collapsing.html b/packages/lit-dev-content/site/_includes/docs-nav-collapsing.html
@@ -19,7 +19,7 @@
                        {% if section.url == page.url %}active{% endif %}">
             {{ section.title }}
             {% if section.labs == true %}
-              <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
+              <lazy-svg class="labs" href="/images/alerts/labs.svg#full" label="labs" visible="lazy"></lazy-svg>
             {% endif %}
           </span>
         </summary>
@@ -29,7 +29,7 @@
               <a href="{{ child.url | url }}">
                 {{ child.title }}
                 {% if child.labs == true %}
-                  <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
+                  <lazy-svg class="labs" href="/images/alerts/labs.svg#full" label="labs" visible="lazy"></lazy-svg>
                 {% endif %}
               </a>
             </li>

diff --git a/packages/lit-dev-content/site/_includes/footer.html b/packages/lit-dev-content/site/_includes/footer.html
@@ -1,8 +1,18 @@
 <footer>
   <div id="footerTop">
     <div id="footerNameAndLogo">
-      <img loading="lazy" id="footerName" src="{{ site.baseurl }}/images/logo.svg#name" alt="" />
-      <img loading="lazy" fetchpriority="high" id="footerFlame" src="{{ site.baseurl }}/images/logo.svg#flame" alt="" />
+      <lazy-svg
+          loading="visible"
+          id="footerName"
+          href="{{ site.baseurl }}/images/logo.svg#name-symbol"
+          label="Lit">
+      </lazy-svg>
+      <lazy-svg
+          loading="visible"
+          id="footerFlame"
+          href="{{ site.baseurl }}/images/logo.svg#flame-symbol"
+          label="Lit logo">
+      </lazy-svg>
     </div>
 
     <!-- TODO(aomarks) Combine SVG symbols into a single sprite sheet at prod

diff --git a/packages/lit-dev-content/site/_includes/header.html b/packages/lit-dev-content/site/_includes/header.html
@@ -1,7 +1,13 @@
 <header class="pageHeader">
   <nav>
     <a id="homeLink" href="{{ site.baseurl }}/" aria-label="Home">
-      <img id="headerLogo" class="black" src="{{ site.baseurl }}/images/logo.svg" alt="Lit Home" width="425" height="200" />
+      <lazy-svg
+        id="headerLogo"
+        svg-role="img"
+        href="{{ site.baseurl }}/images/logo.svg#full"
+        label="Lit Home"
+        loading="eager">
+      </lazy-svg>
     </a>
 
     <ol id="desktopNav">

diff --git a/packages/lit-dev-content/site/_includes/site-nav.html b/packages/lit-dev-content/site/_includes/site-nav.html
@@ -25,16 +25,22 @@
    <a href="{{ site.baseurl }}/blog/">Blog</a></li>
 <li class="navItem">
    <litdev-search-modal></litdev-search-modal></li>
-<li class="navItem">
-   <a
-      href="https://github.com/lit/lit/"
-      target="_blank"
-      rel="noopener"
-      title="GitHub"
-      aria-label="GitHub"
-      ><svg>
-         <use
-            xlink:href="/images/social/github.svg#github"
-         ></use>
-      </svg>
-      </a></li>
+<span class="icons">
+   <li class="navItem">
+      <theme-switcher></theme-switcher>
+   </li>
+   <li class="navItem">
+      <a
+         href="https://github.com/lit/lit/"
+         target="_blank"
+         rel="noopener"
+         title="GitHub"
+         aria-label="GitHub"
+         ><svg>
+            <use
+               xlink:href="/images/social/github.svg#github"
+            ></use>
+         </svg>
+      </a>
+   </li>
+</span>
diff --git a/packages/lit-dev-content/site/css/404.css b/packages/lit-dev-content/site/css/404.css
@@ -6,11 +6,11 @@
 }
 
 h1 {
-  color: #555;
+  color: var(--sys-color-on-background-emphasize);
   font-size: 42px;
   font-weight: 400;
 }
 
 #footerTop {
-  border-top: 1px solid var(--color-blue);
+  border-top: 1px solid var(--sys-color-primary);
 }
diff --git a/packages/lit-dev-content/site/css/articles.css b/packages/lit-dev-content/site/css/articles.css
@@ -1,5 +1,7 @@
-main {
-  background: var(--docs-background-color);
+main,
+article {
+  background-color: var(--sys-color-surface-container-lowest);
+  border: none;
 }
 
 #articleWrapper>article {
@@ -18,7 +20,6 @@ main {
 
 .articleHeader {
   margin-block-end: 1.3rem;
-  border-block-end: 1px solid var(--docs-rule-color);
 }
 
 .articleHeader>* {
@@ -44,7 +45,7 @@ main {
 
 
 #prevAndNextLinks a {
-  border: 1px solid var(--color-medium-gray);
+  border: 1px solid var(--sys-color-on-background-dim);
   border-radius: .5rem;
   padding: 1rem;
   height: 100%;
@@ -57,12 +58,12 @@ main {
 
 #prevAndNextLinks a:hover,
 #prevAndNextLinks a:focus {
-  border: 1px solid var(--color-blue);
-  color: var(--color-blue);
+  border: 1px solid var(--sys-color-primary);
+  color: var(--sys-color-primary);
 }
 
 #prevAndNextLinks>span>a:focus> :is(.direction, .arrow) {
-  color: var(--color-blue);
+  color: var(--sys-color-primary);
 }
 
 #prevAndNextLinks>span>a:first-of-type {
@@ -83,7 +84,7 @@ article {
 
 .feedItem {
   list-style-type: none;
-  border-block-start: 1.5px solid #ccc;
+  border-block-start: 1.5px solid var(--sys-color-outline-variant);
 }
 
 .feedItem:first-of-type {
@@ -103,14 +104,14 @@ article {
 }
 
 .feedItem a .date {
-  color: #666;
+  color: var(--sys-color-on-background-dim);
   font-size: 1em;
   flex-basis: 180px;
 }
 
 .feedItem a .title {
   font-size: 1.5rem;
-  color: #0043c0;
+  color: var(--sys-color-primary-variant);
   margin-block-start: 0
 }
 
@@ -130,7 +131,7 @@ article {
 }
 
 #content a .authors {
-  color: #555;
+  color: var(--sys-color-on-background-dim);
 }
 
 #content .authors {
@@ -159,15 +160,17 @@ article {
 #content .author .links a {
   display: flex;
   margin-inline: .25rem;
-  color: #6f6f6f;
+  color: var(--sys-color-primary-variant);
+  opacity: 0.7;
 }
 
 #content .author .links a:hover,
 #content .author .links a:focus,
 #content .author .links a:active {
   text-decoration: none;
   margin-inline: .25rem;
-  color: var(--color-blue);
+  opacity: 1;
+  color: var(--sys-color-primary);
 }
 
 #content .author .links a svg {
@@ -190,15 +193,15 @@ article {
  * ------------------------------------ */
 
 #content .articleHeader .date {
-  color: var(--color-medium-gray);
+  color: var(--sys-color-on-background-dim);
   font-weight: 600;
 }
 
 /* ------------------------------------
-  * article tags
+  * article tags - View pages not implemented
   * ------------------------------------ */
 
-.articleHeader .tags {
+/* .articleHeader .tags {
   display: flex;
 }
 
@@ -223,7 +226,7 @@ article {
 
 .articleHeader .tags a:active {
   background-color: var(--chips-background-color-press);
-}
+} */
 
 /* ------------------------------------
  * inline toc

diff --git a/packages/lit-dev-content/site/css/blog-common.css b/packages/lit-dev-content/site/css/blog-common.css
@@ -1,3 +1,8 @@
+#content {
+  background-color: var(--sys-color-surface-container-lowest);
+  color: var(--sys-color-on-surface);
+}
+
 #splash {
   box-shadow: rgb(0 0 0 / 20%) 0px 2px 5px 2px;
   display: block;
@@ -13,17 +18,21 @@ article {
 }
 
 h1 {
-  color: #555;
+  color: var(--sys-color-on-background-emphasis);
   font-size: 42px;
   font-weight: 400;
 }
 
+.author img {
+  border: 1px solid var(--sys-color-outline);
+}
+
 img.flame {
-  background: #eee;
+  background-color: var(--sys-color-surface-container);
   box-sizing: border-box;
   padding: 5%;
 }
 
 #footerTop {
-  border-top: 1px solid var(--color-blue);
+  border-top: 1px solid var(--sys-color-primary);
 }
diff --git a/packages/lit-dev-content/site/css/blog-index.css b/packages/lit-dev-content/site/css/blog-index.css
@@ -7,7 +7,7 @@
 .post {
   display: flex;
   padding: 1.5em 0;
-  border-top: 1.5px solid #ccc;
+  border-top: 1.5px solid var(--sys-color-outline);
 }
 
 @media (max-width: 864px) {
@@ -17,7 +17,7 @@
 }
 
 .date {
-  color: #666;
+  color: var(--sys-color-on-background-dim);
   font-size: 18px;
   font-weight: 500;
   flex: 0 0 10em;
@@ -30,7 +30,7 @@
 }
 
 .title > a {
-  color: #0043c0;
+  color: var(--sys-color-primary);
   font-weight: 500;
 }
 
@@ -42,7 +42,7 @@ a:hover {
   display: inline-flex;
   font-weight: 500;
   align-items: center;
-  color: #555;
+  color: var(--sys-color-on-background-dim);
   padding-right: 32px;
 }