Skip to content

Commit 1399bea

Browse files
e111077e111077
authored
feat: implement dark mode (lit#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
1 parent c0cbee0 commit 1399bea

File tree

136 files changed

+2198
-1233
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+2198
-1233
lines changed

‎.github/workflows/integration-tests.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ on: [push, pull_request]
55
jobs:
66
integration-tests:
77
runs-on: macos-latest
8-
timeout-minutes: 10
8+
timeout-minutes: 20
99
steps:
1010
- uses: google/wireit@setup-github-actions-caching/v1
1111
- uses: actions/checkout@v3

‎packages/lit-dev-content/.eleventy.js

+9
Original file line numberDiff line numberDiff line change
@@ -501,6 +501,15 @@ ${content}
501501
)
502502
);
503503

504+
/**
505+
* Inlines an SVG file.
506+
*/
507+
eleventyConfig.addShortcode('inlineSvg', async (src, label) => {
508+
const text = fsSync.readFileSync(`./site/${src}`, 'utf8');
509+
const ariaLabel = label !== undefined ? ` aria-label="${label}"` : '';
510+
return text.replace('<svg', `<svg${ariaLabel}`);
511+
});
512+
504513
/**
505514
* Bundle, minify, and inline a CSS file. Path is relative to ./site/css/.
506515
*

‎packages/lit-dev-content/rollup.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export default [
4646
'lib/components/litdev-playground-page.js',
4747
'lib/github/github-signin-receiver-page.js',
4848
'lib/global/hydrate-common-components.js',
49+
'lib/pages/design.js',
4950
'lib/pages/docs.js',
5051
'lib/pages/home.js',
5152
'lib/pages/learn.js',
@@ -131,8 +132,9 @@ export default [
131132
// the asynchronously-loaded module bundles above.
132133
{
133134
input: [
135+
'lib/global/apply-saved-theme.js',
134136
'lib/global/apply-mods.js',
135-
'lib/global/initialize-typescript-attribute.js',
137+
'lib/global/initialize-typescript-mode.js',
136138
'lib/global/mobile-drawer.js',
137139
'lib/global/dsd-polyfill.js',
138140
],

‎packages/lit-dev-content/site/_includes/blog-post.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@
4747
{% endblock %}
4848

4949
{% block content %}
50-
<img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
50+
<div id="splash">
51+
<div class="bg bg1"></div>
52+
<div class="bg bg2"></div>
53+
<div class="bg bg3"></div>
54+
<div class="bg bg4"></div>
55+
</div>
5156

5257
<article>
5358
<h1>{{ title }}</h1>

‎packages/lit-dev-content/site/_includes/default.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,13 @@
1414
{% endif %}
1515
<link rel="modulepreload" href="{{ site.baseurl }}/js/global/hydrate-common-components.js">
1616

17+
<meta name="theme-color" content="#fff">
18+
{% inlinejs "global/apply-saved-theme.js" %}
19+
{% inlinecss "colors.css" %}
1720
{% inlinecss "global.css" %}
1821

19-
{% inlinecss "mods.css" %}
2022
{% inlinejs "global/apply-mods.js" %}
21-
{% inlinejs "global/initialize-typescript-attribute.js" %}
23+
{% inlinejs "global/initialize-typescript-mode.js" %}
2224
{% inlinejs "global/mobile-drawer.js" %}
2325
{% if env.DEV %}
2426
<script type="module" src="{{ site.baseurl }}/js/global/lit-hydrate-support.js"></script>
@@ -49,13 +51,19 @@
4951
<noscript><style>body[dsd-pending] {display: block !important;}</style></noscript>
5052
{% block head %}{% endblock %}
5153
</head>
52-
<body dsd-pending>
54+
<body dsd-pending class="auto">
5355
<litdev-cookie-banner></litdev-cookie-banner>
5456
<mwc-drawer type="modal" id="mobileDrawer">
5557
<nav>
5658
<div id="mobileSiteNav">
57-
<img src="{{ site.baseurl }}/images/flame-white.svg" alt="" width="24" height="30">
58-
<ol>
59+
<lazy-svg
60+
loading="visible"
61+
href="{{ site.baseurl }}/images/flame-white.svg#full"
62+
svg-aria-hidden
63+
width="24"
64+
height="30">
65+
</lazy-svg>
66+
<ol id="mobile-site-controls">
5967
{% include 'site-nav.html' %}
6068
</ol>
6169
</div>

‎packages/lit-dev-content/site/_includes/docs-nav-collapsing.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{% if section.url == page.url %}active{% endif %}">
2020
{{ section.title }}
2121
{% if section.labs == true %}
22-
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
22+
<lazy-svg class="labs" href="/images/alerts/labs.svg#full" label="labs" visible="lazy"></lazy-svg>
2323
{% endif %}
2424
</span>
2525
</summary>
@@ -29,7 +29,7 @@
2929
<a href="{{ child.url | url }}">
3030
{{ child.title }}
3131
{% if child.labs == true %}
32-
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
32+
<lazy-svg class="labs" href="/images/alerts/labs.svg#full" label="labs" visible="lazy"></lazy-svg>
3333
{% endif %}
3434
</a>
3535
</li>

‎packages/lit-dev-content/site/_includes/docs-nav.html

+24-23
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,30 @@
2424
{% set isFirstThree = section.order < 4 %}
2525
{% set shouldExpand = expandFirstThree and isFirstThree %}
2626
{% set shouldExpand = sectionActive or shouldExpand %}
27-
28-
<details
29-
class="wrapper section-collapse{% if sectionActive %} activeSection{% endif %}"
30-
{% if shouldExpand %}open{% endif %}>
31-
<summary class="sectionHead{% if section.url == page.url %} active{% endif %}">
32-
<span aria-hidden="true" class="marker">›</span>{{ section.title }}
33-
{% if section.labs == true %}
34-
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
35-
{% endif %}
36-
</summary>
37-
<ol>
38-
{% for child in section.children %}
39-
<li{% if child.url == page.url %} class="active"{% endif %}>
40-
<a href="{{ child.url | url }}">
41-
{{ child.title }}
42-
{% if child.labs == true %}
43-
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
44-
{% endif %}
45-
</a>
46-
</li>
47-
{% endfor %}
48-
</ol>
49-
</details>
27+
<li>
28+
<details
29+
class="wrapper section-collapse{% if sectionActive %} activeSection{% endif %}"
30+
{% if shouldExpand %}open{% endif %}>
31+
<summary class="sectionHead{% if section.url == page.url %} active{% endif %}">
32+
<span aria-hidden="true" class="marker">›</span>{{ section.title }}
33+
{% if section.labs == true %}
34+
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
35+
{% endif %}
36+
</summary>
37+
<ol>
38+
{% for child in section.children %}
39+
<li{% if child.url == page.url %} class="active"{% endif %}>
40+
<a href="{{ child.url | url }}">
41+
{{ child.title }}
42+
{% if child.labs == true %}
43+
<img class="labs" src="/images/alerts/labs.svg" alt="labs" loading="lazy" fetchpriority="low" />
44+
{% endif %}
45+
</a>
46+
</li>
47+
{% endfor %}
48+
</ol>
49+
</details>
50+
</li>
5051
{% else %}
5152
<a href="{{ section.url | url }}">{{ section.title }}</a>
5253
{% endif %}

‎packages/lit-dev-content/site/_includes/footer.html

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
11
<footer>
22
<div id="footerTop">
33
<div id="footerNameAndLogo">
4-
<img loading="lazy" id="footerName" src="{{ site.baseurl }}/images/logo.svg#name" alt="" />
5-
<img loading="lazy" fetchpriority="high" id="footerFlame" src="{{ site.baseurl }}/images/logo.svg#flame" alt="" />
4+
<lazy-svg
5+
loading="visible"
6+
id="footerName"
7+
href="{{ site.baseurl }}/images/logo.svg#name-symbol"
8+
label="Lit">
9+
</lazy-svg>
10+
<lazy-svg
11+
loading="visible"
12+
id="footerFlame"
13+
href="{{ site.baseurl }}/images/logo.svg#flame-symbol"
14+
label="Lit logo">
15+
</lazy-svg>
616
</div>
717

818
<!-- TODO(aomarks) Combine SVG symbols into a single sprite sheet at prod

‎packages/lit-dev-content/site/_includes/header.html

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<header class="pageHeader">
22
<nav>
33
<a id="homeLink" href="{{ site.baseurl }}/" aria-label="Home">
4-
<img id="headerLogo" class="black" src="{{ site.baseurl }}/images/logo.svg" alt="Lit Home" width="425" height="200" />
4+
<lazy-svg
5+
id="headerLogo"
6+
svg-role="img"
7+
href="{{ site.baseurl }}/images/logo.svg#full"
8+
label="Lit Home"
9+
loading="eager">
10+
</lazy-svg>
511
</a>
612

713
<ol id="desktopNav">

‎packages/lit-dev-content/site/_includes/site-nav.html

+28-17
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,34 @@
1818
</li>
1919

2020
<li class="navItem{% if page.url.includes('/learn') %} active{% endif %}">
21-
<a href="{{ site.baseurl }}/learn/">Learn</a></li>
21+
<a href="{{ site.baseurl }}/learn/">Learn</a>
22+
</li>
2223
<li class="navItem{% if page.url.includes('/playground') %} active{% endif %}">
23-
<a href="{{ site.baseurl }}/playground/">Playground</a></li>
24+
<a href="{{ site.baseurl }}/playground/">Playground</a>
25+
</li>
2426
<li class="navItem{% if page.url.includes('/blog') %} active{% endif %}">
25-
<a href="{{ site.baseurl }}/blog/">Blog</a></li>
26-
<li class="navItem">
27-
<litdev-search-modal></litdev-search-modal></li>
27+
<a href="{{ site.baseurl }}/blog/">Blog</a>
28+
</li>
2829
<li class="navItem">
29-
<a
30-
href="https://github.com/lit/lit/"
31-
target="_blank"
32-
rel="noopener"
33-
title="GitHub"
34-
aria-label="GitHub"
35-
><svg>
36-
<use
37-
xlink:href="/images/social/github.svg#github"
38-
></use>
39-
</svg>
40-
</a></li>
30+
<litdev-search-modal></litdev-search-modal>
31+
</li>
32+
<li>
33+
<ul class="icons">
34+
<li class="navItem">
35+
<theme-switcher></theme-switcher>
36+
</li>
37+
<li class="navItem">
38+
<a
39+
href="https://github.com/lit/lit/"
40+
target="_blank"
41+
rel="noopener"
42+
title="GitHub"
43+
aria-label="GitHub"
44+
>
45+
<svg>
46+
<use href="/images/social/github.svg#github"></use>
47+
</svg>
48+
</a>
49+
</li>
50+
</ul>
51+
</li>

‎packages/lit-dev-content/site/blog/index.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@
1010
{% endblock %}
1111

1212
{% block content %}
13-
<img id="splash" src="{{ site.baseurl }}/images/blog/{{ splash }}">
13+
<div id="splash">
14+
<div class="bg bg1"></div>
15+
<div class="bg bg2"></div>
16+
<div class="bg bg3"></div>
17+
<div class="bg bg4"></div>
18+
</div>
1419

1520
<article>
1621
<div id="frontMatter">

‎packages/lit-dev-content/site/css/404.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
}
77

88
h1 {
9-
color: #555;
9+
color: var(--sys-color-on-background-emphasize);
1010
font-size: 42px;
1111
font-weight: 400;
1212
}
1313

1414
#footerTop {
15-
border-top: 1px solid var(--color-blue);
15+
border-top: 1px solid var(--sys-color-primary);
1616
}

0 commit comments

Comments
 (0)