diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk index 666381b97..9ae4f31ef 100644 --- a/docs/_includes/default.njk +++ b/docs/_includes/default.njk @@ -38,6 +38,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 f322e086f..1a5b4c581 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -4,6 +4,17 @@
  • 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 3a744bda5..b01672923 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -32,6 +32,18 @@ html:not(.wa-theme-dark) .only-dark { white-space: nowrap; } +.visually-hidden:not(:focus-within) { + position: absolute !important; + width: 1px !important; + height: 1px !important; + clip: rect(0 0 0 0) !important; + clip-path: inset(50%) !important; + border: none !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; +} + @media screen and (max-width: 900px) { :root { --docs-content-padding: 1rem; 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 -