feat: implement dark mode (#1308)

* 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 * remove preload block since we inline the logo svg now * skip reddit in url check * fix gutter bg to code bg * fix reddit alien face to match bg * style the playground error dialog * style the error dialog * update screenshots * add dark theme tests * format * update lit logo in v2 docs * decrease dark mode contrast * up contrast on switch with outline * clean up some missed fixed colors * fix missing link * fix some a11y contrast issues * up the timeout time because new screnshots * update screenshots * fix broken tests * make local tests faster * clean up files * add worker to CI tests * run formatter * fix splash image a11y * re-add retries * update screenshots * fix cookie banner test * update screenshots * normalize top right icon * update screenshots * await any body class * turn on the retries * update screenshots * update screenshot and remove parallel in playground tests due to reset * of course I forgot a screenshot * I really hope these are the last ones because i'm over this * Make blues more blue but keep it accessible * get rid of old harsh theme * update screenshots * stop animations in learn page tests * format * add meta theme color * make more blue and make design page * make image visible by forcing light bg * update colors and design page styles * remove h4 primary-variant-dimmest color * update screenshots * fix bug in selector * update auto mode icon * update screenshots * improve search modal dark mode contrast * sync dark and dark auto mode * alphabetize the users
lit · Mar 12, 2024 · 1399bea · 1399bea
1 parent c0cbee0
commit 1399bea
Show file tree

Hide file tree

Showing 136 changed files with 2,198 additions and 1,233 deletions.
diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml
@@ -5,7 +5,7 @@ on: [push, pull_request]
 jobs:
   integration-tests:
     runs-on: macos-latest
-    timeout-minutes: 10
+    timeout-minutes: 20
     steps:
       - uses: google/wireit@setup-github-actions-caching/v1
       - uses: actions/checkout@v3

diff --git a/packages/lit-dev-content/.eleventy.js b/packages/lit-dev-content/.eleventy.js
@@ -501,6 +501,15 @@ ${content}
     )
   );
 
+  /**
+   * Inlines an SVG file.
+   */
+  eleventyConfig.addShortcode('inlineSvg', async (src, label) => {
+    const text = fsSync.readFileSync(`./site/${src}`, 'utf8');
+    const ariaLabel = label !== undefined ? ` aria-label="${label}"` : '';
+    return text.replace('<svg', `<svg${ariaLabel}`);
+  });
+
   /**
    * 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
@@ -46,6 +46,7 @@ export default [
       'lib/components/litdev-playground-page.js',
       'lib/github/github-signin-receiver-page.js',
       'lib/global/hydrate-common-components.js',
+      'lib/pages/design.js',
       'lib/pages/docs.js',
       'lib/pages/home.js',
       'lib/pages/learn.js',
@@ -131,8 +132,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/blog-post.html b/packages/lit-dev-content/site/_includes/blog-post.html
@@ -47,7 +47,12 @@
 {% endblock %}
 
 {% block content %}
-  <img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
+  <div id="splash">
+    <div class="bg bg1"></div>
+    <div class="bg bg2"></div>
+    <div class="bg bg3"></div>
+    <div class="bg bg4"></div>
+  </div>
 
   <article>
     <h1>{{ title }}</h1>

diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html
@@ -14,11 +14,13 @@
     {% endif %}
     <link rel="modulepreload" href="{{ site.baseurl }}/js/global/hydrate-common-components.js">
 
+    <meta name="theme-color" content="#fff">
+    {% 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/docs-nav.html b/packages/lit-dev-content/site/_includes/docs-nav.html
@@ -24,29 +24,30 @@
     {% set isFirstThree = section.order < 4 %}
     {% set shouldExpand = expandFirstThree and isFirstThree %}
     {% set shouldExpand = sectionActive or shouldExpand %}
-
-    <details
-      class="wrapper section-collapse{% if sectionActive %} activeSection{% endif %}"
-      {% if shouldExpand %}open{% endif %}>
-      <summary class="sectionHead{% if section.url == page.url %} active{% endif %}">
-        <span aria-hidden="true" class="marker">›</span>{{ section.title }}
-        {% if section.labs == true %}
-          <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
-        {% endif %}
-      </summary>
-      <ol>
-      {% for child in section.children %}
-        <li{% if child.url == page.url %} class="active"{% endif %}>
-          <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" />
-            {% endif %}
-          </a>
-        </li>
-      {% endfor %}
-      </ol>
-    </details>
+    <li>
+      <details
+        class="wrapper section-collapse{% if sectionActive %} activeSection{% endif %}"
+        {% if shouldExpand %}open{% endif %}>
+        <summary class="sectionHead{% if section.url == page.url %} active{% endif %}">
+          <span aria-hidden="true" class="marker">›</span>{{ section.title }}
+          {% if section.labs == true %}
+            <img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
+          {% endif %}
+        </summary>
+        <ol>
+        {% for child in section.children %}
+          <li{% if child.url == page.url %} class="active"{% endif %}>
+            <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" />
+              {% endif %}
+            </a>
+          </li>
+        {% endfor %}
+        </ol>
+      </details>
+    </li>
   {% else %}
       <a href="{{ section.url | url }}">{{ section.title }}</a>
   {% endif %}

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
@@ -18,23 +18,34 @@
 </li>
 
 <li class="navItem{% if page.url.includes('/learn') %} active{% endif %}">
-   <a href="{{ site.baseurl }}/learn/">Learn</a></li>
+   <a href="{{ site.baseurl }}/learn/">Learn</a>
+</li>
 <li class="navItem{% if page.url.includes('/playground') %} active{% endif %}">
-   <a href="{{ site.baseurl }}/playground/">Playground</a></li>
+   <a href="{{ site.baseurl }}/playground/">Playground</a>
+</li>
 <li class="navItem{% if page.url.includes('/blog') %} active{% endif %}">
-   <a href="{{ site.baseurl }}/blog/">Blog</a></li>
-<li class="navItem">
-   <litdev-search-modal></litdev-search-modal></li>
+   <a href="{{ site.baseurl }}/blog/">Blog</a>
+</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>
+   <litdev-search-modal></litdev-search-modal>
+</li>
+<li>
+   <ul 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 href="/images/social/github.svg#github"></use>
+            </svg>
+         </a>
+      </li>
+   </ul>
+</li>
diff --git a/packages/lit-dev-content/site/blog/index.html b/packages/lit-dev-content/site/blog/index.html
@@ -10,7 +10,12 @@
 {% endblock %}
 
 {% block content %}
-  <img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
+  <div id="splash">
+    <div class="bg bg1"></div>
+    <div class="bg bg2"></div>
+    <div class="bg bg3"></div>
+    <div class="bg bg4"></div>
+  </div>
 
   <article>
     <div id="frontMatter">

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);
 }