From 96b3b57d811a84a28ea75dab009be456447b30ff Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 13 Jun 2024 23:06:24 -0400 Subject: [PATCH] update docs header --- docs/_includes/base.njk | 40 +++++++++++-- docs/_includes/logo-simple.njk | 2 +- docs/_includes/logo.njk | 14 ++++- docs/_includes/sidebar.njk | 19 ++----- docs/assets/images/logo-simple.svg | 2 +- docs/assets/images/logo.svg | 14 ++++- docs/assets/images/webawesome-wordmark.svg | 2 +- docs/assets/scripts/color-scheme.js | 65 ++++++++++++++++++++++ docs/assets/styles/docs.css | 50 +++++++++++++++-- src/components/badge/badge.styles.ts | 2 +- 10 files changed, 181 insertions(+), 29 deletions(-) create mode 100644 docs/assets/scripts/color-scheme.js diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index c3d71266b..37bd5f22c 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -14,6 +14,7 @@ {# Scripts #} + @@ -33,8 +34,8 @@ {# Set the theme to prevent flashing #} @@ -48,9 +49,38 @@ {# Logo #} - - - +
+ + {% include "logo.njk" %} + + {{ package.version }} + Alpha +
+ +
+ {# Color scheme selector #} + + + + + Light + Dark + + + Light + Dark + + System + + + + {# Search #} + + + Search + / + +
{# Sidebar #} diff --git a/docs/_includes/logo-simple.njk b/docs/_includes/logo-simple.njk index d9b058bc1..910ecd9d3 100644 --- a/docs/_includes/logo-simple.njk +++ b/docs/_includes/logo-simple.njk @@ -1 +1 @@ - + diff --git a/docs/_includes/logo.njk b/docs/_includes/logo.njk index a4d891f64..957e5cfd5 100644 --- a/docs/_includes/logo.njk +++ b/docs/_includes/logo.njk @@ -1 +1,13 @@ - + + + + + + + + + + + + + diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index a8ae3e769..1e16cc8db 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -15,17 +15,6 @@
  • Style Guide
  • Form Validation Styles
  • Sandbox
    • -
  • Dark mode
    • - @@ -144,9 +133,6 @@
  • Mutation Observer
    • -
  • - Option -
  • Page
    • @@ -187,6 +173,11 @@
  • Select +
  • Skeleton diff --git a/docs/assets/images/logo-simple.svg b/docs/assets/images/logo-simple.svg index d9b058bc1..910ecd9d3 100644 --- a/docs/assets/images/logo-simple.svg +++ b/docs/assets/images/logo-simple.svg @@ -1 +1 @@ - + diff --git a/docs/assets/images/logo.svg b/docs/assets/images/logo.svg index 949f42e14..957e5cfd5 100644 --- a/docs/assets/images/logo.svg +++ b/docs/assets/images/logo.svg @@ -1 +1,13 @@ - + + + + + + + + + + + + + diff --git a/docs/assets/images/webawesome-wordmark.svg b/docs/assets/images/webawesome-wordmark.svg index 949f42e14..a27af5200 100644 --- a/docs/assets/images/webawesome-wordmark.svg +++ b/docs/assets/images/webawesome-wordmark.svg @@ -1 +1 @@ - + diff --git a/docs/assets/scripts/color-scheme.js b/docs/assets/scripts/color-scheme.js new file mode 100644 index 000000000..17b5c5969 --- /dev/null +++ b/docs/assets/scripts/color-scheme.js @@ -0,0 +1,65 @@ +// +// Color scheme selector +// +(() => { + function getColorScheme() { + return localStorage.getItem('colorScheme') || 'auto'; + } + + function isDark() { + if (colorScheme === 'auto') { + return window.matchMedia('(prefers-color-scheme: dark)').matches; + } + return colorScheme === 'dark'; + } + + function setColorScheme(newColorScheme) { + colorScheme = newColorScheme; + localStorage.setItem('colorScheme', colorScheme); + + // Update the UI + updateSelection(); + + // Toggle the dark mode class + document.documentElement.classList.toggle('wa-theme-default-dark', isDark()); + } + + function updateSelection() { + const menu = document.querySelector('#color-scheme-selector wa-menu'); + if (!menu) return; + [...menu.querySelectorAll('wa-menu-item')].map(item => (item.checked = item.getAttribute('value') === colorScheme)); + } + + let colorScheme = getColorScheme(); + + // Selection is not preserved when changing page, so update when opening dropdown + document.addEventListener('wa-show', event => { + const colorSchemeSelector = event.target.closest('#color-scheme-selector'); + if (!colorSchemeSelector) return; + updateSelection(); + }); + + // Listen for selections + document.addEventListener('wa-select', event => { + const menu = event.target.closest('#color-scheme-selector wa-menu'); + if (!menu) return; + setColorScheme(event.detail.item.value); + }); + + // Update the color scheme when the preference changes + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme)); + + // Toggle with backslash + document.addEventListener('keydown', event => { + if ( + event.key === '\\' && + !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase())) + ) { + event.preventDefault(); + setColorScheme(isDark() ? 'light' : 'dark'); + } + }); + + // Set the initial color scheme and sync the UI + setColorScheme(colorScheme); +})(); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 927e4a873..444b910bc 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -4,6 +4,15 @@ @import 'outline.css'; @import 'search.css'; +:root { + --wa-brand-orange: #f36944; +} + +html.wa-theme-default-dark .only-light, +html:not(.wa-theme-default-dark) .only-dark { + display: none; +} + wa-page { --wa-flow-spacing: var(--wa-space-xl); } @@ -22,13 +31,46 @@ wa-page > header { flex: 1 1 auto; display: flex; align-items: center; - max-width: 1200px; - height: 60px; - padding-inline: 2rem; + justify-content: space-between; + height: 64px; + padding-inline: var(--wa-space-xl); + + a[href='/'] { + color: var(--wa-color-text-normal); + line-height: 1; + } svg { width: auto; - max-height: 26px; + height: 1.75rem; + } + + #docs-branding, + #docs-toolbar { + display: flex; + align-items: center; + gap: var(--wa-space-xs); + } + + #version-number { + color: var(--wa-color-text-quiet); + font-size: var(--wa-font-size-xs); + line-height: 1; + margin-block-start: var(--wa-space-2xs); + } + #version-number + wa-badge { + --background-color: var(--wa-color-warning-fill-quiet); + --content-color: var(--wa-color-warning-on-quiet); + font-size: var(--wa-font-size-2xs); + text-transform: uppercase; + } + wa-button#search-trigger { + --background-color: var(--wa-form-control-background-color); + --border-color: var(--wa-form-control-resting-color); + } + #search-trigger kbd { + font-size: var(--wa-font-size-2xs); + line-height: var(--wa-form-control-value-line-height); } } diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts index 0ea180185..9eaad6c05 100644 --- a/src/components/badge/badge.styles.ts +++ b/src/components/badge/badge.styles.ts @@ -39,7 +39,7 @@ export default css` display: inline-flex; align-items: center; justify-content: center; - font-size: max(12px, 0.75em); + font-size: max(var(--wa-font-size-2xs), 0.75em); font-weight: var(--wa-font-weight-semibold); line-height: 1; background-color: var(--background-color);