js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into button-appearances

Browse Source
This commit is contained in:
Cory LaViska
2024-06-17 13:38:20 -04:00
parent 02f4b67b7f 4adfcecb80
commit a388cd30e0
12 changed files with 329 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/_includes/base.njk
View File

@@ -50,11 +50,16 @@
{# Logo #}
<div id="docs-branding">
{# Nav toggle #}
<wa-button variant="text" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
<a href="/" aria-label="Web Awesome">
{% include "logo.njk" %}
<span class="only-desktop">{% include "logo.njk" %}</span>
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
</a>
<small id="version-number">{{ package.version }}</small>
<wa-badge variant="warning">Alpha</wa-badge>
<small id="version-number" class="only-desktop">{{ package.version }}</small>
<wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
</div>
<div id="docs-toolbar">
@@ -63,8 +68,8 @@
<wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
<span class="only-light">Light</span>
<span class="only-dark">Dark</span>
<span class="only-light only-desktop">Light</span>
<span class="only-dark only-desktop">Dark</span>
</wa-button>
<wa-menu>
<wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
@@ -78,7 +83,7 @@
<wa-button id="search-trigger" appearance="outline" size="small" data-search>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
Search
<kbd slot="suffix">/</kbd>
<kbd slot="suffix" class="only-desktop">/</kbd>
</wa-button>
</div>
</header>

4
docs/_includes/logo-simple.njk
View File

@@ -1 +1,3 @@
<svg class="logo" xmlns="http://www.w3.org/2000/svg" width="277" height="211" viewBox="0 0 277 211"><g fill="none" fill-rule="evenodd"><path fill="#var(--wa-brand-orange, #F36944)" d="M159.275,20.7541243 C159.275,28.4927904 155.035053,35.2422161 148.749528,38.8106604 L193.9,72.6391714 L238.157213,58.6776414 C236.43401,55.6537326 235.45,52.1547058 235.45,48.42629 C235.45,36.96411 244.751396,27.6721657 256.225,27.6721657 C267.698604,27.6721657 277,36.96411 277,48.42629 C277,59.8883646 267.698604,69.1804143 256.225,69.1804143 C255.131246,69.1804143 254.057541,69.0960801 253.00969,68.9332096 L204.251886,193.411571 C200.096886,204.019762 189.858966,211 178.45659,211 L98.5434095,211 C87.1410343,211 76.9031143,204.019762 72.7481143,193.411571 L23.990205,68.9332096 C22.9423008,69.0960801 21.8685432,69.1804143 20.775,69.1804143 C9.30129067,69.1804143 0,59.8883646 0,48.42629 C0,36.96411 9.30129067,27.6721657 20.775,27.6721657 C32.2487093,27.6721657 41.55,36.96411 41.55,48.42629 C41.55,52.1547058 40.5658322,55.6537326 38.842945,58.6776414 L83.1,72.6391714 L128.250472,38.8106604 C121.964947,35.2422161 117.725,28.4927904 117.725,20.7541243 C117.725,9.29194428 127.026396,0 138.5,0 C149.973604,0 159.275,9.29194428 159.275,20.7541243 Z"/></g></svg>
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 742 B

31
docs/assets/styles/cera_typeface.css Normal file
View File

File diff suppressed because one or more lines are too long

24
docs/assets/styles/docs.css
View File

@@ -3,9 +3,11 @@
@import 'copy-code.css';
@import 'outline.css';
@import 'search.css';
@import 'cera_typeface.css';
:root {
--wa-brand-orange: #f36944;
--wa-brand-grey: #30323b;
}
html.wa-theme-default-dark .only-light,
@@ -21,6 +23,11 @@ wa-page[view='desktop'] [data-toggle-nav] {
display: none;
}
wa-page[view='desktop'] .only-mobile,
wa-page:not([view='desktop']) .only-desktop {
display: none;
}
/* Header */
wa-page::part(header) {
background-color: var(--wa-color-surface-default);
@@ -32,7 +39,7 @@ wa-page > header {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
height: 4rem;
padding-inline: var(--wa-space-xl);
a[href='/'] {
@@ -40,6 +47,14 @@ wa-page > header {
line-height: 1;
}
wa-button[data-toggle-nav] {
--label-color: currentColor;
margin-inline-end: 0.75rem;
&::part(base) {
padding: 0;
}
}
svg {
width: auto;
height: 1.75rem;
@@ -207,7 +222,6 @@ wa-page > main {
}
/* Swatches */
.swatch {
background-color: transparent;
border-color: var(--wa-color-neutral-border-normal);
@@ -219,3 +233,9 @@ wa-page > main {
height: 2.5em;
padding-inline: var(--wa-space-xs);
}
/* Utilities */
.two-columns {
columns: 2;
gap: 1rem;
}

1
docs/assets/styles/search.css
View File

@@ -224,6 +224,7 @@ header {
#site-search footer {
flex: 0 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
gap: 2rem;
color: var(--wa-color-text-quiet);

9
docs/docs/experimental/style-guide.md
View File

@@ -21,11 +21,10 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci.
## Inline Text
```html
Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id.
```
<div class="docs-grid">
<div class="two-columns">
<p><strong>Bold</strong></p>
<p><em>Italics</em></p>
<p><u>Underline</u></p>
@@ -85,17 +84,17 @@ Individual details look like this.
Grouping them provides accordion-style functionality.
<details>
<details name="details-accordion">
<summary>Enim diam</summary>
<p>Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.</p>
</details>
<details>
<details name="details-accordion">
<summary>Arcu non odio</summary>
<p>Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.</p>
</details>
<details>
<details name="details-accordion">
<summary>Ut porttitor</summary>
<p>Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.</p>
</details>

2
docs/docs/localization.md
View File

@@ -4,7 +4,7 @@ description: Discover how to localize Web Awesome with minimal effort.
layout: page.njk
---
Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `<html>` element. Here's an example that renders Web Awesome components in Spanish.
Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `<html>` element. Here's an example that renders Web Awesome components in Spanish.
```html
<html lang="es">

7
docs/docs/theming/component-groups.md
View File

@@ -112,9 +112,6 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` |
```html {.example}
<wa-tooltip content="This is a tooltip" open trigger="manual">
<wa-icon name="bullseye" style="color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xl);"></wa-icon>
</wa-tooltip>
<br />
<wa-range label="Range" help-text="Move the slider to take a gander at the tooltip."></wa-range>
<wa-icon-button id="bullseye-example" label="Button" name="bullseye"></wa-icon-button>
<wa-tooltip for="bullseye-example" open trigger="manual">This is a tooltip</wa-tooltip>
```

4
docs/docs/theming/typography.md
View File

@@ -75,7 +75,3 @@ Together with [`--wa-color-link`](/docs/theming/color/#text), these custom prope
| ------------------------------ | ---------------------------------------------------------------------------------- |
| `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` |
| `--wa-link-decoration-hover` | `underline` |
```html {.example}
<a href="#">Web Awesome anchor</a>
```

284
docs/index.md
View File

@@ -4,6 +4,286 @@ description: Build better with Web Awesome, the open source library of web compo
layout: page.njk
---
This is the homepage. It will soon look awesome. Until then, click the button. 👇
<style>
.title,
.anchor-heading a,
#outline-expandable {
display: none;
}
wa-page > main {
--content-width: 56rem;
--content-padding-inline: 2rem;
--content-flow-spacing: 4rem;
max-width: 100%;
padding: 0;
& p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
}
.brand-font {
font-family: cera-round-pro;
}
.emphasis {
position: relative;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
background-color: var(--wa-brand-orange);
border-radius: var(--wa-border-radius-pill);
width: 100%;
height: 0.1em;
}
}
.hero-background {
background-color: var(--wa-brand-orange);
background-image: linear-gradient(color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--wa-brand-orange), orangered 40%) 1px, transparent 1px);
background-size: 2rem 2rem;
color: white;
padding: 7.5rem 0 var(--content-flow-spacing) 0;
}
.hero-content {
max-width: var(--content-width);
margin-inline: auto;
padding-inline: var(--content-padding-inline);
& > * + * {
margin-block-start: 2rem;
}
& h1 {
font-size: 3.25rem;
}
& .emphasis::after {
background-color: var(--wa-brand-grey);
}
& .wa-crown svg {
width: 4rem;
& path {
fill: white;
}
}
}
.hero-cta {
display: flex;
align-items: center;
gap: 1.5rem;
background-color: var(--wa-brand-grey);
border-radius: 0.75rem;
font-size: 0.875rem;
padding: 1.5rem;
& wa-button {
--wa-form-control-height-s: 2.5rem;
--border-color: black;
--border-width: 0.125rem;
--box-shadow: 0 0.25rem 0 0 var(--border-color);
&:active:not([disabled]) {
--box-shadow: 0 0 0 0 transparent;
transform: translateY(0.25rem);
}
}
}
.home-wrapper {
max-width: var(--content-width);
margin-block: var(--content-flow-spacing);
margin-inline: auto;
padding-inline: var(--content-padding-inline);
}
.home-wrapper > * + * {
margin-block-start: var(--content-flow-spacing);
}
.summary {
background-color: var(--wa-brand-grey);
border-radius: 1.125rem;
color: white;
padding: 4rem;
& > * + * {
margin-block-start: 2rem;
}
& .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
gap: 2rem;
& h3 {
font-size: 1rem;
}
& p {
font-size: 0.875rem;
}
}
}
.split-block {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(30ch, 100%), 1fr));
column-gap: 4rem;
row-gap: 2rem;
align-items: center;
& > * > * + * {
margin-block-start: 1rem;
}
}
.link-panel {
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: 0.75rem;
padding: 1.25rem;
& h3 {
font-size: 1rem;
}
& .icon-heading wa-icon {
background-color: var(--wa-color-neutral-fill-loud);
color: var(--wa-color-neutral-on-loud);
}
& p {
font-size: 0.875rem;
}
}
.icon-heading {
display: flex;
align-items: center;
gap: 1rem;
margin-block-end: 1rem;
& wa-icon {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--wa-brand-orange);
color: white;
border-radius: 0.25rem;
height: 2rem;
width: 2rem;
}
}
footer {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 0.875rem;
& .wa-crown svg {
width: 2rem;
}
& .tagline {
font-size: 1rem;
}
& .attribution {
align-self: flex-start;
& .button-list {
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
gap: 0.5rem;
}
& wa-button {
--wa-form-control-height-m: 1.5rem;
--background-color: var(--wa-color-neutral-fill-quiet);
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 20%);
--label-color: var(--wa-color-neutral-on-quiet);
display: inline-flex;
font-size: 0.75rem;
}
}
}
</style>
<wa-button variant="brand" href="/docs/components/button">Go somewhere</wa-button>
<div class="hero-background">
<div class="hero-content">
<div class="wa-crown">
{% include "logo-simple.njk" %}
</div>
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
<div class="hero-cta">
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
<wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="prefix" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
</div>
</div>
</div>
<div class="home-wrapper">
<div class="summary">
<h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>
<p>Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.</p>
<div class="grid">
<div>
<div class="icon-heading">
<wa-icon name="code" fixed-width></wa-icon>
<h3>Entirely native</h3>
</div>
<p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
</div>
<div>
<div class="icon-heading">
<wa-icon name="palette" fixed-width></wa-icon>
<h3>Fully customizable</h3>
</div>
<p>Show off your own style with components that consistently adapt to your theme.</p>
</div>
<div>
<div class="icon-heading">
<wa-icon name="wheelchair-move" fixed-width></wa-icon>
<h3>Accessibility forward</h3>
</div>
<p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
</div>
<div>
<div class="icon-heading">
<wa-icon name="handshake-simple" fixed-width></wa-icon>
<h3>Proudly open source</h3>
</div>
<p>Use Web Awesome Free however you like. Always free, always open source.</p>
</div>
</div>
</div>
<div class="split-block">
<div>
<h2 class="brand-font"><span class="emphasis">You</span> put the awesome in Web Awesome</h2>
<p>Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.</p>
<p>Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.</p>
</div>
<div>
<div class="link-panel">
<div class="icon-heading">
<wa-icon name="envelope-open" fixed-width></wa-icon>
<h3>Get in touch</h3>
</div>
<p>Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at <a href="mailto:hello@webawesome.com">hello@webawesome.com</a>.</p>
</div>
<div class="link-panel">
<div class="icon-heading">
<wa-icon name="hashtag" fixed-width></wa-icon>
<h3>Follow us</h3>
</div>
<p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://x.com/webawesomer">Twitter (X)</a> and <a href="https://www.instagram.com/web.awesome">Instagram</a>.</p>
</div>
</div>
</div>
<wa-divider></wa-divider>
<footer>
<div class="wa-crown">
{% include "logo-simple.njk" %}
</div>
<div class="split-block">
<div>
<strong class="brand-font tagline">Let's Make Something Awesome</strong>
<p>Web Awesome is the design system platform and open source library of web components from your fellow nerds at <a href="https://www.fontawesome.com/">Font Awesome</a>.</p>
</div>
<div class="attribution">
<span>Special thanks</span>
<div class="button-list">
<wa-button pill href="https://lit.dev/">Lit</wa-button>
<wa-button pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
<wa-button pill href="https://www.11ty.dev/">11ty</wa-button>
<wa-button pill href="https://floating-ui.com/">Floating UI</wa-button>
<wa-button pill href="https://animate.style/">animate.css</wa-button>
<wa-button pill href="https://lunrjs.com/">Lunr</wa-button>
</div>
</div>
</div>
<div>
&copy; Fonticons, Inc.
</div>
</footer>
</div>