From 1399beac6c74b986d75ae1191ee4f5f916c09b61 Mon Sep 17 00:00:00 2001 From: Elliott Marquez <5981958+e111077@users.noreply.github.com> Date: Tue, 12 Mar 2024 13:12:51 -0700 Subject: [PATCH] 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 --- .github/workflows/integration-tests.yml | 2 +- packages/lit-dev-content/.eleventy.js | 9 + packages/lit-dev-content/rollup.config.js | 4 +- .../site/_includes/blog-post.html | 7 +- .../site/_includes/default.html | 18 +- .../site/_includes/docs-nav-collapsing.html | 4 +- .../site/_includes/docs-nav.html | 47 +- .../site/_includes/footer.html | 14 +- .../site/_includes/header.html | 8 +- .../site/_includes/site-nav.html | 45 +- packages/lit-dev-content/site/blog/index.html | 7 +- packages/lit-dev-content/site/css/404.css | 4 +- .../lit-dev-content/site/css/articles.css | 37 +- .../lit-dev-content/site/css/blog-common.css | 91 ++- .../lit-dev-content/site/css/blog-index.css | 8 +- .../lit-dev-content/site/css/blog-post.css | 26 +- packages/lit-dev-content/site/css/code.css | 50 +- packages/lit-dev-content/site/css/colors.css | 254 +++++++- packages/lit-dev-content/site/css/design.css | 13 + .../lit-dev-content/site/css/docs-api.css | 48 +- packages/lit-dev-content/site/css/docs.css | 118 ++-- packages/lit-dev-content/site/css/footer.css | 14 +- packages/lit-dev-content/site/css/global.css | 28 +- packages/lit-dev-content/site/css/header.css | 73 ++- packages/lit-dev-content/site/css/home.css | 51 +- .../site/css/home/1-splash.css | 27 +- .../site/css/home/2-advantages.css | 22 +- .../lit-dev-content/site/css/home/3-tour.css | 42 +- .../site/css/home/4-build-anything.css | 9 +- .../site/css/home/5-who-is-using.css | 14 +- .../site/css/home/6-explore.css | 9 +- .../site/css/home/7-connect.css | 21 +- .../site/css/learn-catalog.css | 164 +++-- .../lit-dev-content/site/css/mobile-nav.css | 17 +- packages/lit-dev-content/site/css/mods.css | 24 - .../lit-dev-content/site/css/playground.css | 42 +- .../site/css/tutorial-catalog.css | 62 -- .../lit-dev-content/site/css/tutorial.css | 30 +- .../site/css/version-selector.css | 15 +- packages/lit-dev-content/site/design.html | 15 + .../v2/composition/component-composition.md | 2 +- .../lit-dev-content/site/docs/v2/index.md | 2 +- .../v3/composition/component-composition.md | 2 +- .../lit-dev-content/site/docs/v3/index.md | 2 +- .../lit-dev-content/site/home/1-splash.html | 12 +- .../site/home/5-who-is-using.html | 40 +- .../site/images/alerts/labs.svg | 2 +- .../site/images/flame-tile-dark.svg | 4 + .../site/images/flame-white.svg | 2 +- packages/lit-dev-content/site/images/logo.svg | 22 +- .../site/images/logos/reddit.svg | 28 + .../lit-dev-content/site/learn/index.html | 18 +- .../src/components/lazy-svg.ts | 22 + .../src/components/litdev-aside.ts | 2 +- .../components/litdev-code-language-switch.ts | 24 +- .../src/components/litdev-cookie-banner.ts | 8 +- .../src/components/litdev-design-section.ts | 136 +++++ .../src/components/litdev-drawer.ts | 2 +- .../src/components/litdev-error-notifier.ts | 7 +- .../src/components/litdev-example-controls.ts | 6 +- .../src/components/litdev-example.ts | 2 +- .../src/components/litdev-flyout.ts | 6 +- .../src/components/litdev-icon-button.ts | 4 +- .../litdev-playground-change-guard.ts | 3 - .../litdev-playground-download-button.ts | 8 +- .../litdev-playground-share-button.ts | 2 +- .../litdev-playground-share-gist.ts | 10 +- .../litdev-playground-share-long-url.ts | 5 +- .../components/litdev-ripple-icon-button.ts | 7 + .../src/components/litdev-search-modal.ts | 6 +- .../src/components/litdev-search-option.ts | 12 +- .../src/components/litdev-search.ts | 44 +- .../src/components/litdev-tutorial-card.ts | 295 --------- .../lit-dev-content/src/components/ssr.ts | 3 +- .../src/components/theme-switcher.ts | 108 ++++ .../src/global/apply-saved-theme.ts | 20 + .../src/global/hydrate-common-components.ts | 1 + ...ibute.ts => initialize-typescript-mode.ts} | 0 packages/lit-dev-content/src/global/theme.ts | 88 +++ .../src/icons/auto-mode-icon.ts | 22 + .../src/icons/dark-mode-icon.ts | 22 + .../src/icons/light-mode-icon.ts | 22 + packages/lit-dev-content/src/pages/design.ts | 7 + packages/lit-dev-content/src/util/colors.ts | 155 +++++ packages/lit-dev-tests/known-good-urls.txt | 1 + .../lit-dev-tests/src/playwright.config.ts | 2 +- ...ingStylesPlaygroundPreview-dark-darwin.png | Bin 0 -> 2072 bytes ...heritingStylesPlaygroundPreview-darwin.png | Bin 2051 -> 2055 bytes .../src/playwright/components-styles.spec.ts | 57 +- .../homePageCookiesBanner-dark-darwin.png | Bin 0 -> 15843 bytes .../homePageCookiesBanner-darwin.png | Bin 15792 -> 15769 bytes .../homePageIntroSection-dark-darwin.png | Bin 0 -> 16109 bytes .../homePageIntroSection-darwin.png | Bin 16957 -> 16681 bytes .../lit-dev-tests/src/playwright/home.spec.ts | 41 +- .../learnCatalog-dark-darwin.png | Bin 0 -> 299498 bytes .../learnCatalog-darwin.png | Bin 250540 -> 287706 bytes .../src/playwright/learn.spec.ts | 29 +- .../backendErrorWritingGist-dark-darwin.png | Bin 0 -> 108132 bytes .../backendErrorWritingGist-darwin.png | Bin 109789 -> 110918 bytes .../gistDoesNotExist-dark-darwin.png | Bin 0 -> 96219 bytes .../gistDoesNotExist-darwin.png | Bin 97471 -> 98868 bytes ...elloWorldPlaygroundProject-dark-darwin.png | Bin 0 -> 62492 bytes .../helloWorldPlaygroundProject-darwin.png | Bin 61854 -> 62162 bytes .../shareGist-1-shareMenuOpen-dark-darwin.png | Bin 0 -> 82545 bytes .../shareGist-1-shareMenuOpen-darwin.png | Bin 81828 -> 81837 bytes .../shareGist-2-signedIn-dark-darwin.png | Bin 0 -> 88052 bytes .../shareGist-2-signedIn-darwin.png | Bin 86923 -> 87682 bytes .../shareGist-3-snackbarOpen-dark-darwin.png | Bin 0 -> 77024 bytes .../shareGist-3-snackbarOpen-darwin.png | Bin 76884 -> 77437 bytes .../shareGist-4-pageReloaded-dark-darwin.png | Bin 0 -> 30005 bytes .../shareGist-4-pageReloaded-darwin.png | Bin 28662 -> 29575 bytes .../shareGist-5-renamingFile-dark-darwin.png | Bin 0 -> 37245 bytes .../shareGist-5-renamingFile-darwin.png | Bin 36649 -> 38031 bytes .../shareGist-6-addingFile-dark-darwin.png | Bin 0 -> 37240 bytes .../shareGist-6-addingFile-darwin.png | Bin 37025 -> 38161 bytes ...eGist-7-shareMenuOpenAgain-dark-darwin.png | Bin 0 -> 47708 bytes .../shareGist-7-shareMenuOpenAgain-darwin.png | Bin 46476 -> 46960 bytes .../shareGist-8-gistUpdated-dark-darwin.png | Bin 0 -> 34888 bytes .../shareGist-8-gistUpdated-darwin.png | Bin 34382 -> 35150 bytes ...reGist-9-pageReloadedAgain-dark-darwin.png | Bin 0 -> 31269 bytes .../shareGist-9-pageReloadedAgain-darwin.png | Bin 30059 -> 30929 bytes ...areLongUrl-1-shareMenuOpen-dark-darwin.png | Bin 0 -> 82792 bytes .../shareLongUrl-1-shareMenuOpen-darwin.png | Bin 82145 -> 82132 bytes ...hareLongUrl-2-snackbarOpen-dark-darwin.png | Bin 0 -> 77644 bytes .../shareLongUrl-2-snackbarOpen-darwin.png | Bin 77158 -> 78132 bytes ...hareLongUrl-3-pageReloaded-dark-darwin.png | Bin 0 -> 30274 bytes .../shareLongUrl-3-pageReloaded-darwin.png | Bin 28950 -> 29857 bytes ...esGitHubAuthWindowTooEarly-dark-darwin.png | Bin 0 -> 127848 bytes ...rClosesGitHubAuthWindowTooEarly-darwin.png | Bin 129966 -> 130790 bytes .../userDeclinesGithubAuth-dark-darwin.png | Bin 0 -> 129188 bytes .../userDeclinesGithubAuth-darwin.png | Bin 131208 -> 132025 bytes .../src/playwright/playground.spec.ts | 561 ++++++++++-------- ...ntroToLitTutorialFirstStep-dark-darwin.png | Bin 0 -> 239535 bytes .../introToLitTutorialFirstStep-darwin.png | Bin 238511 -> 239790 bytes .../src/playwright/tutorials.spec.ts | 34 +- packages/lit-dev-tests/src/playwright/util.ts | 18 + 136 files changed, 2198 insertions(+), 1233 deletions(-) create mode 100644 packages/lit-dev-content/site/css/design.css delete mode 100644 packages/lit-dev-content/site/css/mods.css delete mode 100644 packages/lit-dev-content/site/css/tutorial-catalog.css create mode 100644 packages/lit-dev-content/site/design.html create mode 100644 packages/lit-dev-content/site/images/flame-tile-dark.svg create mode 100644 packages/lit-dev-content/site/images/logos/reddit.svg create mode 100644 packages/lit-dev-content/src/components/litdev-design-section.ts delete mode 100644 packages/lit-dev-content/src/components/litdev-tutorial-card.ts create mode 100644 packages/lit-dev-content/src/components/theme-switcher.ts create mode 100644 packages/lit-dev-content/src/global/apply-saved-theme.ts rename packages/lit-dev-content/src/global/{initialize-typescript-attribute.ts => initialize-typescript-mode.ts} (100%) create mode 100644 packages/lit-dev-content/src/global/theme.ts create mode 100644 packages/lit-dev-content/src/icons/auto-mode-icon.ts create mode 100644 packages/lit-dev-content/src/icons/dark-mode-icon.ts create mode 100644 packages/lit-dev-content/src/icons/light-mode-icon.ts create mode 100644 packages/lit-dev-content/src/pages/design.ts create mode 100644 packages/lit-dev-content/src/util/colors.ts create mode 100644 packages/lit-dev-tests/src/playwright/components-styles.spec.js-snapshots/inheritingStylesPlaygroundPreview-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageCookiesBanner-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/home.spec.js-snapshots/homePageIntroSection-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/learn.spec.js-snapshots/learnCatalog-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/backendErrorWritingGist-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/gistDoesNotExist-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/helloWorldPlaygroundProject-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-1-shareMenuOpen-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-2-signedIn-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-3-snackbarOpen-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-4-pageReloaded-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-5-renamingFile-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-6-addingFile-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-7-shareMenuOpenAgain-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-8-gistUpdated-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareGist-9-pageReloadedAgain-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-1-shareMenuOpen-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-2-snackbarOpen-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/shareLongUrl-3-pageReloaded-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userClosesGitHubAuthWindowTooEarly-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/playground.spec.js-snapshots/userDeclinesGithubAuth-dark-darwin.png create mode 100644 packages/lit-dev-tests/src/playwright/tutorials.spec.js-snapshots/introToLitTutorialFirstStep-dark-darwin.png diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml index d93b5f15a..e713ffd26 100644 --- 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 index e99145997..ef4d2279e 100644 --- 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(' +
+
+
+
+
+

{{ title }}

diff --git a/packages/lit-dev-content/site/_includes/default.html b/packages/lit-dev-content/site/_includes/default.html index 8c07b35a0..9b1754b6b 100644 --- a/packages/lit-dev-content/site/_includes/default.html +++ b/packages/lit-dev-content/site/_includes/default.html @@ -14,11 +14,13 @@ {% endif %} + + {% 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 %} @@ -49,13 +51,19 @@ {% block head %}{% endblock %} - +