diff --git a/docs/assets/images/logo.svg b/docs/assets/images/logo.svg index 6d15ad28..027448c8 100644 --- a/docs/assets/images/logo.svg +++ b/docs/assets/images/logo.svg @@ -1,6 +1,6 @@ - + diff --git a/docs/assets/images/og-image.png b/docs/assets/images/og-image.png index 72b24284..8c1ae333 100644 Binary files a/docs/assets/images/og-image.png and b/docs/assets/images/og-image.png differ diff --git a/docs/assets/images/touch-icon.png b/docs/assets/images/touch-icon.png index 56c2add9..90f9c977 100644 Binary files a/docs/assets/images/touch-icon.png and b/docs/assets/images/touch-icon.png differ diff --git a/docs/assets/images/twitter-card.png b/docs/assets/images/twitter-card.png index fcdb63eb..7c04590b 100644 Binary files a/docs/assets/images/twitter-card.png and b/docs/assets/images/twitter-card.png differ diff --git a/docs/assets/images/undraw-content-team.svg b/docs/assets/images/undraw-content-team.svg index 13a01411..0ee5d052 100644 --- a/docs/assets/images/undraw-content-team.svg +++ b/docs/assets/images/undraw-content-team.svg @@ -22,7 +22,7 @@ - + @@ -32,7 +32,7 @@ - + @@ -41,7 +41,7 @@ - + @@ -50,7 +50,7 @@ - + @@ -67,13 +67,13 @@ - + - - + + diff --git a/docs/assets/images/undraw-not-found.svg b/docs/assets/images/undraw-not-found.svg index aea1d505..8da9a658 100644 --- a/docs/assets/images/undraw-not-found.svg +++ b/docs/assets/images/undraw-not-found.svg @@ -1 +1 @@ -not found \ No newline at end of file +not found diff --git a/docs/assets/images/wordmark.svg b/docs/assets/images/wordmark.svg index f853ed3e..7940b74c 100644 --- a/docs/assets/images/wordmark.svg +++ b/docs/assets/images/wordmark.svg @@ -1,6 +1,6 @@ - + diff --git a/docs/assets/plugins/search/search.css b/docs/assets/plugins/search/search.css index b6f241a2..263fe114 100644 --- a/docs/assets/plugins/search/search.css +++ b/docs/assets/plugins/search/search.css @@ -106,7 +106,7 @@ body.site-search-visible { .site-search__results li[aria-selected='true'] a sl-icon { outline: none; color: var(--sl-color-neutral-0); - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } .sl-theme-dark .site-search__results li[aria-selected='true'] a, @@ -123,7 +123,7 @@ body.site-search-visible { .site-search__results small { display: block; - color: var(--sl-color-neutral-600); + color: var(--sl-color-neutral-700); } .site-search__result { diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index e1632491..aaecc8a5 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -69,11 +69,12 @@ strong { opacity: 1; } -.sidebar-toggle:active .sidebar-toggle-button span { +.sidebar-toggle span, +.sidebar-toggle:active .sidebar-toggle span { background-color: var(--sl-color-primary-700); } -.sidebar-toggle:focus { +.sidebar-toggle:focus-visible { outline: none; box-shadow: var(--sl-focus-ring); } @@ -290,10 +291,6 @@ strong { padding: 2px 4px; } -.markdown-section tr:nth-child(2n) code { - background-color: var(--sl-color-neutral-100); -} - kbd, .markdown-section kbd { font-family: var(--sl-font-mono); @@ -346,7 +343,7 @@ kbd, .markdown-section pre .token.keyword, .markdown-section pre .token.tag, .markdown-section pre .token.url { - color: var(--sl-color-blue-700); + color: var(--sl-color-sky-700); } .markdown-section pre .token.symbol, @@ -411,8 +408,9 @@ kbd, border: none; } +.markdown-section tr, .markdown-section tr:nth-child(2n) { - background: var(--sl-color-neutral-50); + background: none; } .markdown-section th { @@ -473,19 +471,19 @@ kbd, } .markdown-section p.warn { - border-left-color: var(--sl-color-primary-600); + border-left-color: var(--sl-color-primary-700); } .markdown-section p.warn:before { - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } .markdown-section p.tip { - border-left-color: var(--sl-color-danger-600); + border-left-color: var(--sl-color-danger-700); } .markdown-section p.tip:before { - background-color: var(--sl-color-danger-600); + background-color: var(--sl-color-danger-700); } .markdown-section p.tip code, @@ -554,7 +552,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code { .border-radius-demo { width: 3rem; height: 3rem; - background: var(--sl-color-primary-600); + background: var(--sl-color-primary-700); } /* Transition demo */ @@ -568,7 +566,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code { .transition-demo:after { content: ''; position: absolute; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); top: 0; left: 0; width: 0; @@ -584,7 +582,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code { /* Spacing demo */ .spacing-demo { width: 100px; - background: var(--sl-color-primary-600); + background: var(--sl-color-primary-700); } /* Elevation demo */ diff --git a/docs/components/animation.md b/docs/components/animation.md index 29244a39..34a426b7 100644 --- a/docs/components/animation.md +++ b/docs/components/animation.md @@ -19,7 +19,7 @@ To animate an element, wrap it in `` and set an animation `name`. display: inline-block; width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); margin: 1.5rem; } @@ -33,7 +33,7 @@ const css = ` display: inline-block; width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); margin: 1.5rem; } `; @@ -117,7 +117,7 @@ This example demonstrates all of the baked-in animations and easings. Animations .animation-sandbox .box { width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } .animation-sandbox .controls { @@ -163,7 +163,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/ display: inline-block; width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } ``` @@ -181,7 +181,7 @@ const css = ` display: inline-block; width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } `; @@ -253,7 +253,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/ .animation-keyframes .box { width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } ``` @@ -265,7 +265,7 @@ const css = ` .animation-keyframes .box { width: 100px; height: 100px; - background-color: var(--sl-color-primary-600); + background-color: var(--sl-color-primary-700); } `; diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 5d5c1d05..f1eaeb2e 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -14,7 +14,13 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug that prevented form submission from working as expected in some cases - Fixed a bug that prevented `` from toggling `vertical` properly [#703](https://github.com/shoelace-style/shoelace/issues/703) - Fixed a bug that prevented `` from rendering a color initially [#704](https://github.com/shoelace-style/shoelace/issues/704) +- Improved accessibility throughout the docs +- Improved contrast in all components to meet the [Level AA](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) standard +- Improved accessibility of `` so the trigger's expanded state is announced correctly +- Improved accessibility of `` but rendering a `