From 5e2762cbc6dce9675af4fd7e5cd4b27569e45972 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 14 Sep 2023 11:19:10 -0400 Subject: [PATCH 1/7] backport PR 1564 --- src/components/details/details.component.ts | 1 + src/components/mutation-observer/mutation-observer.component.ts | 1 + src/components/popup/popup.component.ts | 1 + src/components/tab-group/tab-group.component.ts | 1 + 4 files changed, 4 insertions(+) diff --git a/src/components/details/details.component.ts b/src/components/details/details.component.ts index 6bcfa5148..5c6ab19f0 100644 --- a/src/components/details/details.component.ts +++ b/src/components/details/details.component.ts @@ -87,6 +87,7 @@ export default class WaDetails extends WebAwesomeElement { } disconnectedCallback() { + super.disconnectedCallback(); this.detailsObserver.disconnect(); } diff --git a/src/components/mutation-observer/mutation-observer.component.ts b/src/components/mutation-observer/mutation-observer.component.ts index 6dd2ee7f2..3dce15918 100644 --- a/src/components/mutation-observer/mutation-observer.component.ts +++ b/src/components/mutation-observer/mutation-observer.component.ts @@ -52,6 +52,7 @@ export default class WaMutationObserver extends WebAwesomeElement { } disconnectedCallback() { + super.disconnectedCallback(); this.stopObserver(); } diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts index 312269d74..e339215f2 100644 --- a/src/components/popup/popup.component.ts +++ b/src/components/popup/popup.component.ts @@ -198,6 +198,7 @@ export default class WaPopup extends WebAwesomeElement { } disconnectedCallback() { + super.disconnectedCallback(); this.stop(); } diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index b51bfeab3..95141a1df 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -117,6 +117,7 @@ export default class WaTabGroup extends WebAwesomeElement { } disconnectedCallback() { + super.disconnectedCallback(); this.mutationObserver.disconnect(); this.resizeObserver.unobserve(this.nav); } From ef3575358ede257aaffc9433f30f6e08bdd788b1 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 14 Sep 2023 11:36:00 -0400 Subject: [PATCH 2/7] temp dark mode toggle --- docs/_includes/default.njk | 9 +++++++++ docs/_includes/sidebar.njk | 12 ++++++++++++ docs/assets/scripts/code-previews.js | 8 +------- docs/assets/styles/docs.css | 5 ----- docs/pages/getting-started/installation.md | 4 ++-- docs/pages/getting-started/themes.md | 14 +++++++------- src/themes/default.css | 2 +- 7 files changed, 32 insertions(+), 22 deletions(-) diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index d15ee2cd5..8c1f166f3 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -37,6 +37,15 @@ + {# Set the initial theme and menu states here to prevent flashing #} + + {# Web Fonts #} diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 19c3e5724..bd7ce74ad 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -3,6 +3,18 @@

Experimental

  • diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js index e1b3ab28e..5564ede72 100644 --- a/docs/assets/scripts/code-previews.js +++ b/docs/assets/scripts/code-previews.js @@ -166,9 +166,6 @@ const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent; const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent; const isReact = flavor === 'react' && typeof reactExample === 'string'; - const theme = document.documentElement.classList.contains('wa-theme-dark') ? 'dark' : 'light'; - const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - const isDark = theme === 'dark' || (theme === 'auto' && prefersDark); const editors = isReact ? '0010' : '1000'; let htmlTemplate = ''; let jsTemplate = ''; @@ -204,9 +201,7 @@ // CSS templates cssTemplate = - `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/${ - isDark ? 'dark' : 'light' - }.css';\n` + + `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/default.css';\n` + '\n' + 'body {\n' + ' font: var(--wa-font-size-root) sans-serif;\n' + @@ -222,7 +217,6 @@ tags: ['web awesome', 'web components'], editors, head: ``, - html_classes: `wa-theme-${isDark ? 'dark' : 'light'}`, css_external: ``, js_external: ``, js_module: true, diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index bdeb0822b..63a1a9ae4 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -23,11 +23,6 @@ } /* Utils */ -html.wa-theme-dark .only-light, -html:not(.wa-theme-dark) .only-dark { - display: none !important; -} - .visually-hidden:not(:focus-within) { position: absolute !important; width: 1px !important; diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md index 99e52f83b..9d2aceb10 100644 --- a/docs/pages/getting-started/installation.md +++ b/docs/pages/getting-started/installation.md @@ -43,7 +43,7 @@ The traditional CDN loader registers all Web Awesome elements up front. Note tha ### Dark Theme -The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `` to your page. +The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `` to your page. ```html @@ -64,7 +64,7 @@ If you want to load the light or dark theme based on the user's `prefers-color-s rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css" - onload="document.documentElement.classList.add('wa-theme-dark');" + onload="document.documentElement.classList.add('wa-theme-default-dark');" /> ``` diff --git a/docs/pages/getting-started/themes.md b/docs/pages/getting-started/themes.md index be4e5abf6..11132aaf9 100644 --- a/docs/pages/getting-started/themes.md +++ b/docs/pages/getting-started/themes.md @@ -16,7 +16,7 @@ For component developers, built-in themes are also available as JavaScript modul ## Theme Basics -All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-light` and `wa-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` +All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power` All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots. @@ -32,7 +32,7 @@ All selectors must be scoped to the theme's class to ensure interoperability wit To activate a theme, import it and apply the theme's class to the `` element. This example imports and activates the built-in dark theme. ```html - + @@ -59,7 +59,7 @@ You can activate themes on various containers throughout the page. This example -