diff --git a/.prettierignore b/.prettierignore index e3f4ba0ae..f0911782d 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,5 @@ *.hbs +*.mdx .cache .github cspell.json diff --git a/docs/assets/images/web-awesome-mark-black.svg b/docs/assets/images/web-awesome-mark-black.svg new file mode 100644 index 000000000..a95543887 --- /dev/null +++ b/docs/assets/images/web-awesome-mark-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 69a47821b..5591daa81 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -5,39 +5,10 @@ description: Hand-crafted custom elements for any occasion. import Logo from '../../components/Logo.astro'; -
-
- -
-
-
- -# Web Awesome: - -- Works with all frameworks 🧩 -- Works with CDNs 🚛 -- Fully customizable with CSS 🎨 -- Includes a dark theme 🌛 -- Built with accessibility in mind ♿️ -- First-class [React support](/frameworks/react) ⚛️ -- Built-in localization 💬 -- Open source 😸 -- [More awesome than ever](https://blog.fontawesome.com/shoelace-joins-font-awesome/) ![Awesome emoji](/assets/images/awesome.svg) - -
- Cartoon of people assembling components while standing on a giant laptop. -
-
-
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@shoelace-style/shoelace/badge)](https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace) [![npm](https://img.shields.io/npm/dw/@shoelace-style/shoelace?label=npm&style=flat-square)](https://www.npmjs.com/package/@shoelace-style/shoelace) [![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/shoelace-style/shoelace/blob/next/LICENSE.md) - [![Discord](https://img.shields.io/badge/Discord-Join%20the%20chat-5965f2.svg?style=flat-square&logo=discord&logoColor=white)](https://discord.gg/mg8f26C) [![Twitter](https://img.shields.io/badge/Twitter-Follow-00acee.svg?style=flat-square&logo=twitter&logoColor=white)](https://twitter.com/shoelace_style) @@ -48,14 +19,8 @@ import Logo from '../../components/Logo.astro'; Add the following code to your page. ```html - - + + ``` Now you have access to all of Web Awesome's components! Try adding a button: diff --git a/docs/src/styles/global.css b/docs/src/styles/global.css index 76f31f42b..9c80c3b9c 100644 --- a/docs/src/styles/global.css +++ b/docs/src/styles/global.css @@ -48,10 +48,25 @@ html:not(.wa-theme-dark) .only-dark { padding: 0 !important; } -@media screen and (max-width: 900px) { - :root { - --docs-content-padding: 1rem; - } +.sidebar-content ul, +.sidebar-content details, +.sidebar-content summary { + padding: unset; + margin: unset; +} + +.sidebar-content summary { + text-indent: 0.5rem; + margin-block: 0.5rem; +} + +.sidebar-content a { + text-decoration: unset; +} + +.main-frame main h1 { + margin: 0; + margin-block-start: 1rem; } html { @@ -172,11 +187,6 @@ th.table-description { } /* Code blocks */ - -pre:not(:last-child) { - margin-bottom: 1.5rem; -} - pre { position: relative; overflow: auto; @@ -195,71 +205,6 @@ pre > code { position: relative; } -pre .token.comment { - color: var(--wa-color-base-40); -} - -pre .token.prolog, -pre .token.doctype, -pre .token.cdata, -pre .token.operator, -pre .token.punctuation { - color: var(--wa-color-base-40); -} - -.namespace { - opacity: 0.7; -} - -pre .token.property, -pre .token.keyword, -pre .token.tag, -pre .token.url { - color: var(--wa-color-brand-text-on-fill); -} - -pre .token.symbol, -pre .token.deleted { - color: var(--wa-color-danger-text-on-fill); -} - -pre .token.boolean, -pre .token.constant, -pre .token.selector, -pre .token.attr-name, -pre .token.string, -pre .token.char, -pre .token.builtin, -pre .token.inserted { - color: var(--wa-color-success-text-on-fill); -} - -pre .token.atrule, -pre .token.attr-value, -pre .token.number, -pre .token.variable { - color: var(--wa-color-warning-text-on-fill); -} - -pre .token.function, -pre .token.class-name, -pre .token.regex { - color: var(--wa-color-danger-text-on-fill); -} - -pre .token.important { - color: var(--wa-color-danger-text-on-fill); -} - -pre .token.important, -pre .token.bold { - font-weight: bold; -} - -pre .token.italic { - font-style: italic; -} - /* Copy code button */ .copy-code-button { position: absolute; @@ -273,17 +218,17 @@ pre .token.italic { } .copy-code-button::part(button) { - background-color: var(--wa-color-neutral-fill-subtle); + background-color: var(--wa-color-primary-fill-subtle); border-radius: 0 var(--wa-corners-s) 0 var(--wa-corners-s); padding: 0.75rem; } .copy-code-button::part(button):hover { - background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-hover)); + background-color: color-mix(in oklab, var(--wa-color-primary-fill-subtle), var(--wa-color-mix-hover)); } .copy-code-button::part(button):active { - background-color: color-mix(in oklab, var(--wa-color-neutral-fill-subtle), var(--wa-color-mix-active)); + background-color: color-mix(in oklab, var(--wa-color-primary-fill-subtle), var(--wa-color-mix-active)); } :is(.code-preview__source, pre, .code-preview) > .copy-code-button { @@ -297,570 +242,6 @@ pre .token.italic { scale: 1; } -/* Callouts */ -.callout { - margin-bottom: var(--docs-content-vertical-spacing); -} - -.callout > :first-child { - margin-top: 0; -} - -.callout > :last-child { - margin-bottom: 0; -} - -.callout a { - color: inherit; -} - -.callout p { - margin-top: 0; -} - -/* Aside */ -.content aside { - float: right; - min-width: 300px; - max-width: 50%; - background: var(--wa-color-surface-lowered); - border-radius: var(--wa-corners-s); - padding: var(--wa-space-m); - margin-left: var(--wa-space-m); -} - -.content aside > :first-child { - margin-top: 0; -} - -.content aside > :last-child { - margin-bottom: 0; -} - -@media screen and (max-width: 600px) { - .content aside { - float: none; - width: calc(100% + (var(--docs-content-padding) * 2)); - max-width: none; - margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding)); - } -} - -/* Sidebar */ -#sidebar { - position: fixed; - flex: 0; - top: 0; - left: 0; - bottom: 0; - z-index: 20; - width: var(--docs-sidebar-width); - background-color: var(--docs-background-color); - border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border); - border-radius: 0; - padding: 2rem; - margin: 0; - overflow: auto; - scrollbar-width: thin; - transition: var(--docs-sidebar-transition-speed) translate ease-in-out; -} - -#sidebar::-webkit-scrollbar { - width: 4px; -} - -#sidebar::-webkit-scrollbar-thumb { - background: transparent; - border-radius: 9999px; -} - -#sidebar:hover::-webkit-scrollbar-thumb { - background: var(--wa-color-base-60); -} - -#sidebar:hover::-webkit-scrollbar-track { - background: var(--wa-color-base-95); -} - -#sidebar > header { - margin-bottom: 1.5rem; -} - -#sidebar > header h1 { - margin: 0; -} - -#sidebar > header svg { - margin-bottom: var(--wa-space-s); -} - -#sidebar > header a { - display: block; -} - -#sidebar nav a { - text-decoration: none; -} - -#sidebar nav h2 { - font-size: var(--wa-font-size-m); - font-weight: var(--wa-font-weight-medium); - border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border); - margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0; -} - -#sidebar ul { - padding: 0; - margin: 0; -} - -#sidebar ul li { - list-style: none; - padding: 0; - margin: 0.125rem 0.5rem; -} - -#sidebar ul ul ul { - margin-left: 0.75rem; -} - -#sidebar ul li a { - line-height: 1.33; - color: inherit; - display: inline-block; - padding: 0; -} - -#sidebar ul li a:not(.active-link):hover { - color: var(--wa-color-text-link); -} - -#sidebar nav .active-link { - color: var(--wa-color-text-link); - border-bottom: dashed 1px var(--wa-color-text-link); -} - -#sidebar > header img { - display: block; - width: 100%; - height: auto; - margin: 0 auto; -} - -@media screen and (max-width: 900px) { - #sidebar { - translate: -100%; - } - - .sidebar-open #sidebar { - translate: 0; - } -} - -.sidebar-version { - font-size: var(--wa-font-size-s); - color: var(--wa-color-text-quiet); - text-align: right; - margin-top: calc(-1 * var(--wa-space-s)); - margin-bottom: calc(-1 * var(--wa-space-s)); -} - -.sidebar-buttons { - display: flex; - justify-content: space-between; -} - -/* Main content */ -main { - position: relative; - padding: var(--docs-content-vertical-spacing) var(--docs-content-padding) - calc(var(--docs-content-vertical-spacing) * 2) var(--docs-content-padding); - /* margin-left: var(--docs-sidebar-width); */ - margin: 0; -} - -.sidebar-open .content { - margin-left: 0; -} - -.content__body > :last-child { - margin-bottom: 0; -} - -@media screen and (max-width: 900px) { - main { - margin-left: 0; - } -} - -/* Component layouts */ -.content { - display: grid; - grid-template-columns: 100%; - gap: 2rem; - position: relative; - max-width: var(--docs-content-max-width); - margin: 0 auto; -} - -.content--with-toc { - /* There's a 2rem gap, so we need to remove it from the column */ - grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width)); - max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width)); -} - -.content__body { - order: 1; - width: 100%; -} - -.content:not(.content--with-toc) .content__toc { - display: none; -} - -.content__toc { - order: 2; - display: flex; - flex-direction: column; - margin-top: 0; -} - -.content__toc ul { - position: sticky; - top: 5rem; - max-height: calc(100vh - 6rem); - font-size: var(--wa-font-size-s); - line-height: 1.33; - border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border); - list-style: none; - padding: 1rem 0; - margin: 0; - padding-left: 1rem; - overflow-y: auto; -} - -.content__toc li { - padding: 0 0 0 0.5rem; - margin: 0; -} - -.content__toc li[data-level='3'] { - margin-left: 1rem; -} - -/* We don't use them, but just in case */ -.content__toc li[data-level='4'], -.content__toc li[data-level='5'], -.content__toc li[data-level='6'] { - margin-left: 2rem; -} - -.content__toc li:not(:last-of-type) { - margin-bottom: 0.6rem; -} - -.content__toc a { - color: var(--wa-color-text-normal); - text-decoration: none; -} - -.content__toc a:hover { - color: var(--wa-color-text-link); -} - -.content__toc a.active { - color: var(--wa-color-brand-text-on-surface); - border-bottom: dashed 1px var(--wa-color-brand-text-on-surface); -} - -.content__toc .top a { - font-weight: var(--wa-font-weight-medium); - color: var(--wa-color-text-quiet); -} - -@media screen and (max-width: 1024px) { - .content { - grid-template-columns: 100%; - gap: 0; - } - - .content__toc { - position: relative; - order: 1; - } - - .content__toc ul { - display: flex; - justify-content: start; - gap: 1rem 1.5rem; - position: static; - border: none; - border-bottom: solid 1px var(--wa-color-surface-border); - border-radius: 0; - padding: 1rem 1.5rem 1rem 0.5rem; /* extra right padding to hide the fade effect */ - margin-top: 1rem; - overflow-x: auto; - } - - .content__toc ul::after { - content: ''; - position: absolute; - top: 0; - bottom: 1rem; /* don't cover the scrollbar */ - right: 0; - width: 2rem; - background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%); - } - - .content__toc li { - white-space: nowrap; - } - - .content__toc li:not(:last-of-type) { - margin-bottom: 0; - } - - .content__toc [data-level]:not([data-level='2']) { - display: none; - } - - .content__body { - order: 2; - } -} - -/* Menu toggle */ -#menu-toggle { - display: none; - position: fixed; - z-index: 30; - top: 0.25rem; - left: 0.25rem; - height: auto; - width: auto; - color: var(--wa-color-neutral-spot); - border: none; - border-radius: 50%; - background: var(--wa-color-surface-default); - padding: 0.5rem; - margin: 0; - cursor: pointer; - transition: 250ms rotate ease; -} - -@media screen and (max-width: 900px) { - #menu-toggle { - display: flex; - } -} - -#menu-toggle svg { - width: 1.25rem; - height: 1.25rem; -} - -html.sidebar-open #menu-toggle { - rotate: 180deg; -} - -/* Skip to main content */ -#skip-to-main { - position: fixed; - top: 0.25rem; - left: calc(50% - var(--docs-skip-to-main-width) / 2); - z-index: 100; - width: var(--docs-skip-to-main-width); - text-align: center; - text-decoration: none; - border-radius: 9999px; - background: var(--wa-color-surface-default); - color: var(--wa-color-text-normal); - padding: 0.5rem; -} - -/* Print styles */ -@media print { - a:not(.anchor-heading)[href]::after { - content: ' (' attr(href) ')'; - } - - details, - pre { - border: solid var(--wa-border-width-s) var(--wa-color-surface-border); - } - - details summary { - list-style: none; - } - - details summary span { - padding-left: 0; - } - - details summary::marker, - details summary::-webkit-details-marker { - display: none; - } - - .component-page__navigation, - .copy-code-button, - .code-preview__buttons, - .code-preview__resizer { - display: none !important; - } - - .flavor-html .code-preview__source--html, - .flavor-react .code-preview__source--react { - display: block !important; - } - - .flavor-html .code-preview__source--html > pre, - .flavor-react .code-preview__source--react > pre { - border: none; - } - - .code-preview__source-group { - border-bottom: solid 1px var(--wa-border-width-s); - border-bottom-left-radius: var(--wa-corners-s); - border-bottom-right-radius: var(--wa-corners-s); - } - - #sidebar { - display: none; - } - - #content { - margin-left: 0; - } - - #menu-toggle, - #icon-toolbar, - .external-link__icon { - display: none; - } -} - -/* Splash */ -.splash { - padding-top: 2rem; -} - -.splash-start { - min-width: 440px; -} - -.splash li img { - width: 1em; - height: 1em; - vertical-align: -2px; -} - -.splash svg { - margin-block-end: var(--wa-space-m); -} - -.splash-end { - display: flex; - align-items: flex-end; - gap: 16px; -} - -main .sl-container { - margin: 0 auto !important; -} - -.splash-image { - width: calc(100% - 300px); - height: auto; -} - -.splash-start h1:first-of-type { - font-size: var(--wa-font-size-l); - font-weight: var(--wa-font-weight-normal); - margin: 0 0 0.5rem 0; -} - -@media screen and (max-width: 1280px) { - .splash { - display: block; - } - - .splash-start { - min-width: 0; - padding-bottom: 1rem; - } - - .splash-end { - display: block; - padding: 0; - } - - .splash-image { - display: block; - max-width: 400px; - } - - /* Shields */ - .splash + p { - margin-top: 2rem; - } -} - -/* Component headers */ -.component-header h1 { - margin-bottom: 0; -} - -.component-header__tag { - margin-top: -0.5rem; - margin-bottom: 0.5rem; -} - -.component-header__tag code { - background: none; - color: var(--wa-color-text-quiet); - font-size: var(--wa-font-size-l); - padding: 0; - margin: 0; -} - -.component-header__info { - margin-bottom: var(--wa-space-2xl); -} - -.component-summary { - font-size: var(--wa-font-size-l); - line-height: 1.6; - margin: 2rem 0; -} - -/* Repo buttons */ -.sidebar-buttons { - display: flex; - gap: 0.125rem; - justify-content: space-between; -} - -.sidebar-buttons .repo-button { - flex: 1 1 auto; -} - -.repo-button wa-icon { - color: var(--wa-color-neutral-text-on-spot); -} - -@media screen and (max-width: 400px) { - :not(.sidebar-buttons) > .repo-button { - width: 100%; - margin-bottom: 1rem; - } -} - -body[data-page^='/tokens/'] .table-wrapper td:first-child, -body[data-page^='/tokens/'] .table-wrapper td:first-child code { - white-space: nowrap; -} - /* Border demos */ .border-demo { height: 60px; diff --git a/docs/src/styles/syntax-highlight.css b/docs/src/styles/syntax-highlight.css index 67701677c..1e4f2c1de 100644 --- a/docs/src/styles/syntax-highlight.css +++ b/docs/src/styles/syntax-highlight.css @@ -1,7 +1,3 @@ -:root { - --sl-content-width: 50rem; -} - /* Code highlighter */ pre, .sl-markdown-content pre:not(:where(.not-content *)) { diff --git a/src/themes/applied.css b/src/themes/applied.css index dd3e2e807..a9fb7d3c7 100644 --- a/src/themes/applied.css +++ b/src/themes/applied.css @@ -24,7 +24,7 @@ body { line-height: var(--wa-font-line-height-regular); text-size-adjust: none; color: var(--wa-color-text-normal); - padding: var(--wa-space-m); + padding: 0; margin: 0; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;