mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
1 Commits
card-ssr-s
...
remixing
| Author | SHA1 | Date | |
|---|---|---|---|
|
4316c2670a |
@@ -1,18 +1,24 @@
|
||||
{%- if not stylesheets %}{% set stylesheets = [stylesheet] %}{% endif -%}
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
Add the following code to the `<head>` of your page:
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
|
||||
{% for stylesheet in stylesheets -%}
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />{% if not loop.last %}
|
||||
{% endif %}{% endfor %}
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Add the following code at the top of your CSS file:
|
||||
Simply add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
{% for stylesheet in stylesheets -%}
|
||||
@import url('{% cdnUrl stylesheet %}');{% if not loop.last %}
|
||||
{% endif %}{% endfor %}
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/docs/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
|
||||
</ul>
|
||||
|
||||
{% for tag, title in {
|
||||
|
||||
@@ -1,77 +0,0 @@
|
||||
```html {.example}
|
||||
<style>
|
||||
div.alignment {
|
||||
background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
div.alignment::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="alignment">
|
||||
<wa-switch size="small">Switch</wa-switch>
|
||||
<wa-checkbox size="small">Checkbox</wa-checkbox>
|
||||
<wa-radio value="1" size="small">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch>Switch</wa-switch>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
<wa-radio value="1">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch size="large">Switch</wa-switch>
|
||||
<wa-checkbox size="large">Checkbox</wa-checkbox>
|
||||
<wa-radio value="1" size="large">Radio</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="small" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="small"></wa-input>
|
||||
<wa-select size="small" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="small"></wa-color-picker>
|
||||
<wa-button size="small">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="medium" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="medium"></wa-input>
|
||||
<wa-select size="medium" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="medium"></wa-color-picker>
|
||||
<wa-button size="medium">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-textarea placeholder="textarea" size="large" rows="1"></wa-textarea>
|
||||
<wa-input placeholder="input" size="large"></wa-input>
|
||||
<wa-select size="large" value="1" multiple>
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="large"></wa-color-picker>
|
||||
<wa-button size="large">Button</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-badge>Badge</wa-badge>
|
||||
<code>Code</code>
|
||||
<kbd>Keyboard</kbd>
|
||||
<ins>Inserted</ins>
|
||||
<del>Deleted</del>
|
||||
<mark>Highlighted</mark>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@@ -1,799 +0,0 @@
|
||||
<h3>Badge</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-accent">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-accent">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-accent">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-accent">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-accent">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-filled wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-filled wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-filled wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-filled wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-filled wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="filled">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-filled">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-filled">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-filled">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-filled">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-filled">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-outlined">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-outlined">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-outlined">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-outlined">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-outlined">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="plain">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="plain">Neutral</wa-badge>
|
||||
<wa-badge variant="success" appearance="plain">Success</wa-badge>
|
||||
<wa-badge variant="warning" appearance="plain">Warning</wa-badge>
|
||||
<wa-badge variant="danger" appearance="plain">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" class="wa-plain">Brand</wa-badge>
|
||||
<wa-badge variant="neutral" class="wa-plain">Neutral</wa-badge>
|
||||
<wa-badge variant="success" class="wa-plain">Success</wa-badge>
|
||||
<wa-badge variant="warning" class="wa-plain">Warning</wa-badge>
|
||||
<wa-badge variant="danger" class="wa-plain">Danger</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="accent outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-accent wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-accent wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-accent wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-accent wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-accent wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="accent">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="accent">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="accent">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-accent">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-accent">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-accent">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-accent">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-accent">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-filled wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-filled wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-filled wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-filled wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-filled wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="filled">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="filled">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="filled">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="filled">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-filled">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-filled">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-filled">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-filled">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-filled">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-outlined">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-outlined">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-outlined">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-outlined">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="plain">Brand</wa-button>
|
||||
<wa-button variant="neutral" appearance="plain">Neutral</wa-button>
|
||||
<wa-button variant="success" appearance="plain">Success</wa-button>
|
||||
<wa-button variant="warning" appearance="plain">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="plain">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" class="wa-plain">Brand</wa-button>
|
||||
<wa-button variant="neutral" class="wa-plain">Neutral</wa-button>
|
||||
<wa-button variant="success" class="wa-plain">Success</wa-button>
|
||||
<wa-button variant="warning" class="wa-plain">Warning</wa-button>
|
||||
<wa-button variant="danger" class="wa-plain">Danger</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-accent wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-filled wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Brand
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Neutral
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Success
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Warning
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" class="wa-plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Danger
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Tag</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>accent</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-accent wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-accent wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-accent wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-accent wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-accent wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>accent</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-accent">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-accent">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-accent">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-accent">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-accent">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code> + <code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-filled wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-filled wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-filled wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-filled wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-filled wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="filled">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-filled">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-filled">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-filled">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-filled">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-filled">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-outlined">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-outlined">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-outlined">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-outlined">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-outlined">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>plain</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="plain">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="plain">Neutral</wa-tag>
|
||||
<wa-tag variant="success" appearance="plain">Success</wa-tag>
|
||||
<wa-tag variant="warning" appearance="plain">Warning</wa-tag>
|
||||
<wa-tag variant="danger" appearance="plain">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" class="wa-plain">Brand</wa-tag>
|
||||
<wa-tag variant="neutral" class="wa-plain">Neutral</wa-tag>
|
||||
<wa-tag variant="success" class="wa-plain">Success</wa-tag>
|
||||
<wa-tag variant="warning" class="wa-plain">Warning</wa-tag>
|
||||
<wa-tag variant="danger" class="wa-plain">Danger</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Form Controls</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>appearance=""</code></th>
|
||||
<th><code>.wa-[appearance]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input appearance="outlined" placeholder="Input"></wa-input>
|
||||
<wa-select appearance="outlined" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea appearance="outlined" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input class="wa-outlined" placeholder="Input"></wa-input>
|
||||
<wa-select class="wa-outlined" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-outlined" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>filled</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input appearance="filled" placeholder="Input"></wa-input>
|
||||
<wa-select appearance="filled" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea appearance="filled" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-input class="wa-filled" placeholder="Input"></wa-input>
|
||||
<wa-select class="wa-filled" placeholder="Select">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-filled" placeholder="Textarea"></wa-textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,698 +0,0 @@
|
||||
<h3>Badge</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="brand" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="success" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="warning" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="danger" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="brand" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-brand" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="neutral" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="success" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="success" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="success" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-success" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="warning" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-warning" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="danger" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-danger" appearance="plain">Plain</wa-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Outlined
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="plain">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Plain
|
||||
</wa-callout>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Tag</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>variant=""</code></th>
|
||||
<th><code>.wa-[variant]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="brand" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="success" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="warning" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="danger" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,32 +0,0 @@
|
||||
<h3>Form Controls</h3>
|
||||
|
||||
```html {.example}
|
||||
<form class="wa-stack">
|
||||
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
||||
<wa-select label="Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea label="Textarea" placeholder="Placeholder"></wa-textarea>
|
||||
<wa-radio-group label="Radio group" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
<wa-switch>Switch</wa-switch>
|
||||
<wa-slider label="Range"></wa-slider>
|
||||
<wa-button>Button</wa-button>
|
||||
</form>
|
||||
```
|
||||
|
||||
<h3>Progress</h3>
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
||||
<wa-progress-ring value="50" max="100"></wa-progress-ring>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
```
|
||||
@@ -1,745 +0,0 @@
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-button></code></th>
|
||||
<th><code><button></code></th>
|
||||
<th><code>.wa-button</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-button>Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button>Button</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button">Button</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-brand</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-brand">Brand</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-brand">Brand</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-brand">Brand</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-neutral</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-neutral">Neutral</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-neutral">Neutral</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-success</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-success">Success</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-success">Success</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-success">Success</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-warning</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-warning">Warning</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-warning">Warning</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-warning">Warning</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-danger</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-danger">Danger</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-danger">Danger</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-danger">Danger</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-accent</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-accent">Accent</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-accent">Accent</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-accent">Accent</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-filled">Filled</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-filled">Filled</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-filled">Filled</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-outlined</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-outlined">Outlined</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-outlined">Outlined</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-outlined">Outlined</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-plain</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-plain">Plain</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-plain">Plain</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-plain">Plain</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-s">Small</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-s">Small</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-s">Small</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-m">Medium</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-m">Medium</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-m">Medium</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-size-l">Large</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-size-l">Large</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-size-l">Large</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-pill</code></th>
|
||||
<td>
|
||||
<wa-button class="wa-pill">Pill</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<button class="wa-pill">Pill</button>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-button wa-pill">Pill</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-callout></code></th>
|
||||
<th><code>.wa-callout</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="test-failure"><em>default</em></th>
|
||||
<td>
|
||||
<wa-callout>Callout</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout">Callout</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-brand</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-brand">Brand</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-brand">Brand</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-neutral</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-neutral">Neutral</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-neutral">Neutral</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-success</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-success">Success</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-success">Success</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-warning</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-warning">Warning</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-warning">Warning</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-danger</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-danger">Danger</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-danger">Danger</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-accent</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-accent">Accent</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-accent">Accent</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-filled">Filled</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-filled">Filled</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-outlined</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-outlined">Outlined</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-outlined">Outlined</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-plain</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-plain">Plain</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-plain">Plain</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-s">Small</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-s">Small</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-m">Medium</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-m">Medium</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-size-l">Large</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-size-l">Large</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-pill</code></th>
|
||||
<td>
|
||||
<wa-callout class="wa-pill">Pill</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-callout wa-pill">Pill</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Checkbox</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-checkbox></code></th>
|
||||
<th><code><input type="checkbox"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-checkbox>Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="checkbox"></input> Checkbox</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>checked</code></th>
|
||||
<td>
|
||||
<wa-checkbox checked>Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="checkbox" checked></input> Checkbox</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Color Picker</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-color-picker></code></th>
|
||||
<th><code><input type="color"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-color-picker label="Color Picker" value="#ffa07a"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<label>Color Picker <input type="color" value="#ffa07a"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Details</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-details></code></th>
|
||||
<th><code><details></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-details summary="Summary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
</td>
|
||||
<td>
|
||||
<details>
|
||||
<summary>Summary</summary>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>dir="rtl"</code></th>
|
||||
<td>
|
||||
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
||||
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
||||
</wa-details>
|
||||
</td>
|
||||
<td>
|
||||
<details lang="ar" dir="rtl">
|
||||
<summary>تبديلني</summary>
|
||||
<p>استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن</p>
|
||||
</details>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Input</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-input></code></th>
|
||||
<th><code><input></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-input label="Input" placeholder="Placeholder"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="password"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (password)" type="password"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (password) <input type="password"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="date"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (date)" type="date"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (date) <input type="date"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>type="time"</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (time)" type="time"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (time) <input type="time"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (filled)" placeholder="Placeholder" class="wa-filled"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label>Input (filled) <input type="text" placeholder="Placeholder" class="wa-filled"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (small)" placeholder="Placeholder" class="wa-size-s"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Input (small) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (medium)" placeholder="Placeholder" class="wa-size-m"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Input (medium) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-input label="Input (large)" placeholder="Placeholder" class="wa-size-l"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Input (large) <input type="text" placeholder="Placeholder"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Progress Bar</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-progress-bar></code></th>
|
||||
<th><code><progress></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-progress-bar value="50" max="100"></wa-progress-bar>
|
||||
</td>
|
||||
<td>
|
||||
<progress value="50" max="100"></progress>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-radio></code></th>
|
||||
<th><code><input type="radio"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-radio>Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="radio"></input> Radio</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>checked</code></th>
|
||||
<td>
|
||||
<wa-radio-group value="1">
|
||||
<wa-radio value="1">Radio</wa-radio>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<label><input type="radio" checked></input> Radio</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Select</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-select></code></th>
|
||||
<th><code><select></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-select label="Select" value="1">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label>Select
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (filled)" value="1" class="wa-filled">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-filled">Select (filled)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (small)" value="1" class="wa-size-s">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Select (small)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (medium)" value="1" class="wa-size-m">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Select (medium)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-select label="Select (large)" value="1" class="wa-size-l">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Select (large)
|
||||
<select value="1">
|
||||
<option value="1">Option</option>
|
||||
</select>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Slider</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-slider></code></th>
|
||||
<th><code><input type="range"></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-slider label="Slider"></wa-slider>
|
||||
</td>
|
||||
<td>
|
||||
<label>Slider <input type="range"></input></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3 class="test-failure">Textarea</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code><wa-textarea></code></th>
|
||||
<th><code><textarea></code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><em>default</em></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea" placeholder="Placeholder" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label>Textarea <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-filled</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (filled)" placeholder="Placeholder" class="wa-filled" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label>Textarea (filled) <textarea placeholder="Placeholder" class="wa-filled" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-s</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (small)" placeholder="Placeholder" class="wa-size-s" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-s">Textarea (small) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-m</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (medium)" placeholder="Placeholder" class="wa-size-m" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-m">Textarea (medium) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>.wa-size-l</code></th>
|
||||
<td>
|
||||
<wa-textarea label="Textarea (large)" placeholder="Placeholder" class="wa-size-l" rows="2"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<label class="wa-size-l">Textarea (large) <textarea placeholder="Placeholder" rows="2"></textarea></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,856 +0,0 @@
|
||||
<h3>Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-button size="small">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-s">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-button size="medium">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-m">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-button size="large">Button</wa-button>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button class="wa-size-l">Button</wa-button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Button Group</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="small">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-s">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="medium">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-m">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" size="large">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-button-group orientation="horizontal" class="wa-size-l">
|
||||
<wa-button value="1">Button L</wa-button>
|
||||
<wa-button value="2">Button R</wa-button>
|
||||
</wa-button-group>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Callout</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-callout size="small">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-s">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-callout size="medium">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-m">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-callout size="large">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
<td>
|
||||
<wa-callout class="wa-size-l">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Callout
|
||||
</wa-callout>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Card</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-card size="small">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-s">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-card size="medium">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-m">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-card size="large">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
<td>
|
||||
<wa-card class="wa-size-l">
|
||||
Card
|
||||
</wa-card>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Checkbox</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="small">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-s">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="medium">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-m">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" size="large">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<wa-checkbox hint="Hint" class="wa-size-l">Checkbox</wa-checkbox>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Color Picker</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="small" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-s" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="medium" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-m" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-color-picker size="large" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
<td>
|
||||
<wa-color-picker class="wa-size-l" label="Color Picker" hint="Hint"></wa-color-picker>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Dropdown</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="small">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-s">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="medium">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-m">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-dropdown size="large">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
<td>
|
||||
<wa-dropdown class="wa-size-l">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Menu</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-menu size="small">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-s">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-menu size="medium">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-m">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-menu size="large">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
<td>
|
||||
<wa-menu class="wa-size-l">
|
||||
<wa-menu-item>Menu Item 1</wa-menu-item>
|
||||
<wa-menu-item>Menu Item 2</wa-menu-item>
|
||||
</wa-menu>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Input</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-input size="small" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-s" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-input size="medium" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-m" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-input size="large" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
<td>
|
||||
<wa-input class="wa-size-l" label="Input" placeholder="Placeholder" hint="Hint"></wa-input>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-radio size="small">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-s">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-radio size="medium">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-m">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-radio size="large">Radio</wa-radio>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio class="wa-size-l">Radio</wa-radio>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio Button</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="small" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="small" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-s" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-s" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="medium" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="medium" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-m" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-m" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button size="large" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button size="large" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
<td>
|
||||
<wa-radio-group orientation="horizontal">
|
||||
<wa-radio-button class="wa-size-l" value="1">Radio</wa-radio-button>
|
||||
<wa-radio-button class="wa-size-l" value="2">Button</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Radio Group</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="small">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="small">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-s">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-s">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="medium">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="medium">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-m">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-m">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" size="large">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" size="large">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-stack">
|
||||
<wa-radio-group label="Radio Group" hint="Hint" class="wa-size-l">
|
||||
<wa-radio value="1">Radio 1</wa-radio>
|
||||
<wa-radio value="2">Radio 2</wa-radio>
|
||||
</wa-radio-group>
|
||||
<wa-radio-group orientation="horizontal" label="Radio Button Group" hint="Hint" class="wa-size-l">
|
||||
<wa-radio-button value="1">Radio 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Radio 2</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Rating</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-rating size="small"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-s"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-rating size="medium"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-m"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-rating size="large"></wa-rating>
|
||||
</td>
|
||||
<td>
|
||||
<wa-rating class="wa-size-l"></wa-rating>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Select</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-select size="small" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-s" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-select size="medium" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-m" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-select size="large" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
<td>
|
||||
<wa-select class="wa-size-l" label="Select" placeholder="Placeholder" hint="Hint">
|
||||
<wa-option value="1">Option</wa-option>
|
||||
</wa-select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Switch</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="small">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-s">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="medium">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-m">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-switch hint="Hint" size="large">Switch</wa-switch>
|
||||
</td>
|
||||
<td>
|
||||
<wa-switch hint="Hint" class="wa-size-l">Switch</wa-switch>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<h3>Textarea</h3>
|
||||
|
||||
<div class="table-scroll">
|
||||
<table>
|
||||
<thead>
|
||||
<th></th>
|
||||
<th><code>size=""</code></th>
|
||||
<th><code>.wa-size-[s|m|l]</code></th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><code>small</code>/<code>s</code></th>
|
||||
<td>
|
||||
<wa-textarea size="small" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-s" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>medium</code>/<code>m</code></th>
|
||||
<td>
|
||||
<wa-textarea size="medium" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-m" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>large</code>/<code>l</code></th>
|
||||
<td>
|
||||
<wa-textarea size="large" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
<td>
|
||||
<wa-textarea class="wa-size-l" label="Textarea" placeholder="Placeholder" hint="Hint"></wa-textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -255,7 +255,7 @@
|
||||
{# Importing #}
|
||||
<h2>Importing</h2>
|
||||
<p>
|
||||
The <a href="/docs/installation/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
The <a href="/docs/#autoloading">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
</p>
|
||||
|
||||
<wa-tab-group label="How would you like to import this component?">
|
||||
|
||||
@@ -14,19 +14,11 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% if file %}
|
||||
{% markdown %}
|
||||
## Opting In to Native {{ title }} Styles
|
||||
{# Slots #}
|
||||
{% if css_file %}
|
||||
<h2>Using these styles</h2>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
|
||||
|
||||
If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**,
|
||||
you can include the following CSS files from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = file %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../).
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -20,6 +20,6 @@ tags: ["overview"]
|
||||
<script type="module" src="/assets/scripts/filter.js"></script>
|
||||
|
||||
{% if content | trim %}
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
{{ content | safe }}
|
||||
{% endif %}
|
||||
|
||||
@@ -3,64 +3,15 @@
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
{% set themeId = page.fileSlug %}
|
||||
{% if themeId == 'remixed' -%}
|
||||
{% set themeId = 'default' %}
|
||||
{% endif -%}
|
||||
|
||||
{% block header %}
|
||||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||||
|
||||
<p id="mix_and_match" class="wa-gap-m">
|
||||
<strong>
|
||||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||||
Remix
|
||||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||||
</strong>
|
||||
<wa-select name="colors" label="Colors from…" size="small">
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" size="small">
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for p in collections.palette | sort %}
|
||||
{% if p.fileSlug !== palette %}
|
||||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" size="small">
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
|
||||
</p>
|
||||
<script>
|
||||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||||
let url = new URL(demo.src);
|
||||
|
||||
for (let select of selects) {
|
||||
url.searchParams.set(select.name, select.value);
|
||||
}
|
||||
|
||||
demo.src = url;
|
||||
});
|
||||
</script>
|
||||
<iframe src='/docs/themes/{{ themeId }}/demo.html' id="demo"></iframe>
|
||||
|
||||
{% if palette -%}
|
||||
<h2>Default Color Palette</h2>
|
||||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||||
{% set themePage = page %}
|
||||
@@ -69,34 +20,20 @@
|
||||
{% include 'page-card.njk' %}
|
||||
</div>
|
||||
{% set page = themePage %}
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% markdown %}
|
||||
{%- if page.fileSlug != 'remixed' %}
|
||||
## How to use this theme
|
||||
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||||
{% set stylesheet = 'styles/themes/' + themeId + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
### Remixing { #remixing }
|
||||
|
||||
If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||||
</wa-callout>
|
||||
{% endif %}
|
||||
|
||||
## Dark mode
|
||||
|
||||
@@ -138,7 +75,6 @@ You can apply the class to the `<html>` element on your page to activate the dar
|
||||
Web Awesome's themes have both light and dark styles built in.
|
||||
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
|
||||
This should be done at the application level.
|
||||
|
||||
As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||||
@@ -147,18 +83,5 @@ As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
|
||||
Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
|
||||
you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
|
||||
|
||||
```js
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const applyDark = function (event = systemDark) {
|
||||
const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
|
||||
document.documentElement.classList.toggle('wa-dark', isDark);
|
||||
};
|
||||
systemDark.addEventListener('change', applyDark);
|
||||
applyDark();
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% if file %}
|
||||
{% markdown %}
|
||||
## Opting In
|
||||
|
||||
If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = file %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
Want them all?
|
||||
Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -538,23 +538,4 @@ table.colors {
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-2xs);
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
wa-select::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
wa-select[value='']::part(display-input),
|
||||
wa-option[value=''] {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,39 +17,32 @@ icon: button-group
|
||||
|
||||
### Button Sizes
|
||||
|
||||
Unless otherwise specified,
|
||||
the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
|
||||
All button sizes are supported, but avoid mixing sizes within the same button group.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group size="small" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="small">Left</wa-button>
|
||||
<wa-button size="small">Center</wa-button>
|
||||
<wa-button size="small">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group size="medium" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="medium">Left</wa-button>
|
||||
<wa-button size="medium">Center</wa-button>
|
||||
<wa-button size="medium">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group size="large" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button size="large">Left</wa-button>
|
||||
<wa-button size="large">Center</wa-button>
|
||||
<wa-button size="large">Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
:::info
|
||||
While you can still set the size of [buttons](/docs/components/button) individually,
|
||||
and it will override the inherited size,
|
||||
it is rarely a good idea to mix sizes within the same button group.
|
||||
:::
|
||||
|
||||
### Vertical button groups
|
||||
|
||||
Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
@@ -77,21 +70,21 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button group's `variant` attribute.
|
||||
Theme buttons are supported through the button's `variant` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="brand">Left</wa-button>
|
||||
<wa-button variant="brand">Center</wa-button>
|
||||
<wa-button variant="brand">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="success">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="success">Left</wa-button>
|
||||
<wa-button variant="success">Center</wa-button>
|
||||
<wa-button variant="success">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
@@ -104,28 +97,18 @@ Theme buttons are supported through the button group's `variant` attribute.
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="warning">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="warning">Left</wa-button>
|
||||
<wa-button variant="warning">Center</wa-button>
|
||||
<wa-button variant="warning">Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button-group label="Alignment" variant="danger">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
You can still use the buttons’ own `variant` attribute to override the inherited variant.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button variant="neutral">Right</wa-button>
|
||||
<wa-button-group label="Alignment">
|
||||
<wa-button variant="danger">Left</wa-button>
|
||||
<wa-button variant="danger">Center</wa-button>
|
||||
<wa-button variant="danger">Right</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
|
||||
@@ -30,43 +30,33 @@ Use the `appearance` attribute to change the button's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="success">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Plain</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ icon: card
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-card class="card-overview">
|
||||
<wa-card with-image with-footer class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
@@ -61,10 +61,10 @@ Basic cards aren't very exciting, but they can display any content you want them
|
||||
### Card with Header
|
||||
|
||||
Headers can be used to display titles and more.
|
||||
If using SSR, you need to also use the `ssr-slots` attribute to add a header to the card (if not, it is added automatically).
|
||||
If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
|
||||
|
||||
```html {.example}
|
||||
<wa-card ssr-slots="header" class="card-header">
|
||||
<wa-card with-header class="card-header">
|
||||
<div slot="header">
|
||||
Header Title
|
||||
<wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
|
||||
@@ -97,10 +97,10 @@ If using SSR, you need to also use the `ssr-slots` attribute to add a header to
|
||||
### Card with Footer
|
||||
|
||||
Footers can be used to display actions, summaries, or other relevant content.
|
||||
If using SSR, you need to also use the `ssr-slots` attribute to add a footer to the card (if not, it is added automatically).
|
||||
If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
|
||||
|
||||
```html {.example}
|
||||
<wa-card ssr-slots="footer" class="card-footer">
|
||||
<wa-card with-footer class="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<div slot="footer">
|
||||
@@ -125,10 +125,10 @@ If using SSR, you need to also use the `ssr-slots` attribute to add a footer to
|
||||
### Images
|
||||
|
||||
Card images are displayed atop the card and will stretch to fit.
|
||||
If using SSR, you need to also use the `ssr-slots` attribute to add an image to the card (if not, it is added automatically).
|
||||
If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
|
||||
|
||||
```html {.example}
|
||||
<wa-card ssr-slots="image" class="card-image">
|
||||
<wa-card with-image class="card-image">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
@@ -143,42 +143,3 @@ If using SSR, you need to also use the `ssr-slots` attribute to add an image to
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Sizing
|
||||
|
||||
Use the `size` attribute to change a card's size.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-card ssr-slots=footer size="small">
|
||||
This is a small card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
|
||||
<wa-card ssr-slots=footer size="medium">
|
||||
This is a medium card (default).
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
|
||||
<wa-card ssr-slots=footer size="large">
|
||||
This is a large card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -66,11 +66,9 @@ Use the `swatches` attribute to add convenient presets to the color picker. Any
|
||||
Use the `size` attribute to change the color picker's trigger size.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-gap-m wa-align-items-baseline">
|
||||
<wa-color-picker size="small" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="large" label="Select a color"></wa-color-picker>
|
||||
</div>
|
||||
<wa-color-picker size="small" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="medium" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker size="large" label="Select a color"></wa-color-picker>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
@@ -9,7 +9,7 @@ icon: radio-group
|
||||
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -23,7 +23,7 @@ Radio buttons are designed to be used with [radio groups](/docs/components/radio
|
||||
To set the initial value and checked state, use the `value` attribute on the containing radio group.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -35,7 +35,7 @@ To set the initial value and checked state, use the `value` attribute on the con
|
||||
Use the `disabled` attribute to disable a radio button.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2" disabled>Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -47,7 +47,7 @@ Use the `disabled` attribute to disable a radio button.
|
||||
Use the `size` attribute to change a radio button's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -55,7 +55,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -63,7 +63,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -75,7 +75,7 @@ Use the `size` attribute to change a radio button's size.
|
||||
Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -83,7 +83,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -91,7 +91,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" name="a" value="1">
|
||||
<wa-radio-button pill value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button pill value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button pill value="3">Option 3</wa-radio-button>
|
||||
@@ -103,7 +103,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio-button value="1">
|
||||
<wa-icon slot="prefix" name="archive" variant="solid"></wa-icon>
|
||||
Option 1
|
||||
@@ -127,7 +127,7 @@ Use the `prefix` and `suffix` slots to add icons.
|
||||
You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
|
||||
<wa-radio-group label="Select an option" name="a" value="neutral">
|
||||
<wa-radio-button value="angry">
|
||||
<wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
|
||||
</wa-radio-button>
|
||||
|
||||
@@ -32,28 +32,7 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
|
||||
[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group
|
||||
label="Horizontal options"
|
||||
hint="Select an option that makes you proud."
|
||||
orientation="horizontal"
|
||||
name="a"
|
||||
value="1"
|
||||
>
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
|
||||
<br>
|
||||
|
||||
<wa-radio-group
|
||||
label="Vertical options"
|
||||
hint="Select an option that makes you proud."
|
||||
orientation="vertical"
|
||||
name="a"
|
||||
value="1"
|
||||
style="max-width: 300px;"
|
||||
>
|
||||
<wa-radio-group label="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
@@ -72,39 +51,28 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Orientation
|
||||
|
||||
The default orientation for radio items is `vertical`. Set the `orientation` to `horizontal` to items on the same row.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group
|
||||
label="Select an option"
|
||||
hint="Choose the most appropriate option."
|
||||
orientation="horizontal"
|
||||
name="a"
|
||||
value="1"
|
||||
>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Sizing Options
|
||||
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute.
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" onchange="this.size = this.value">
|
||||
```html preview
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
|
||||
<wa-radio value="small">Small</wa-radio>
|
||||
<wa-radio value="medium">Medium</wa-radio>
|
||||
<wa-radio value="large">Large</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<script>
|
||||
const radioGroup = document.querySelector('.radio-group-size');
|
||||
|
||||
radioGroup.addEventlistener('change', () => {
|
||||
radioGroup.size = radioGroup.value;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
:::info
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute,
|
||||
which will override the inherited size when used.
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
|
||||
:::
|
||||
|
||||
### Validation
|
||||
@@ -159,7 +127,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity when a selection is made
|
||||
form.addEventListener('change', () => {
|
||||
form.addEventlistener('change', () => {
|
||||
const isValid = radioGroup.value === '3';
|
||||
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
|
||||
});
|
||||
|
||||
@@ -11,8 +11,8 @@ Radios are designed to be used with [radio groups](/docs/components/radio-group)
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -29,8 +29,8 @@ To set the initial value and checked state, use the `value` attribute on the con
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="3">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio>
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio><br>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -53,24 +53,24 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" value="1">
|
||||
<wa-radio value="1">Small 1</wa-radio>
|
||||
<wa-radio value="2">Small 2</wa-radio>
|
||||
<wa-radio value="1">Small 1</wa-radio><br>
|
||||
<wa-radio value="2">Small 2</wa-radio><br>
|
||||
<wa-radio value="3">Small 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" value="1">
|
||||
<wa-radio value="1">Medium 1</wa-radio>
|
||||
<wa-radio value="2">Medium 2</wa-radio>
|
||||
<wa-radio value="1">Medium 1</wa-radio><br>
|
||||
<wa-radio value="2">Medium 2</wa-radio><br>
|
||||
<wa-radio value="3">Medium 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" value="1">
|
||||
<wa-radio value="1">Large 1</wa-radio>
|
||||
<wa-radio value="2">Large 2</wa-radio>
|
||||
<wa-radio value="1">Large 1</wa-radio><br>
|
||||
<wa-radio value="2">Large 2</wa-radio><br>
|
||||
<wa-radio value="3">Large 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
@@ -35,20 +35,12 @@ Use the `precision` attribute to let users select fractional ratings.
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
```
|
||||
|
||||
### Sizing
|
||||
### Symbol Sizes
|
||||
|
||||
Use the `size` attribute to adjust the size of the rating.
|
||||
Set the `--symbol-size` custom property to adjust the size.
|
||||
|
||||
```html {.example}
|
||||
<wa-rating label="Rating" size="small"></wa-rating><br>
|
||||
<wa-rating label="Rating" size="medium"></wa-rating><br>
|
||||
<wa-rating label="Rating" size="large"></wa-rating>
|
||||
```
|
||||
|
||||
For more granular sizing, you can use the `font-size` property.
|
||||
|
||||
```html {.example}
|
||||
<wa-rating label="Rating" style="font-size: 2rem;"></wa-rating>
|
||||
<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
|
||||
```
|
||||
|
||||
### Readonly
|
||||
|
||||
@@ -7,11 +7,7 @@ native: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<form action="about:blank" target="_blank">
|
||||
<wa-textarea label="Type something', will ya" name="a" value="no"></wa-textarea>
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
<wa-textarea></wa-textarea>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
@@ -1,28 +1,24 @@
|
||||
---
|
||||
title: Customizing
|
||||
description: Learn how to customize Web Awesome through themes, parts, and custom properties.
|
||||
description: Learn how to customize Web Awesome through parts and custom properties.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
You can customize the look and feel of Web Awesome at a high level with themes. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
|
||||
Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
|
||||
|
||||
## Themes
|
||||
|
||||
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
|
||||
Web Awesome uses numerous CSS custom properties that make up a high-level theming API and provide a consistent look and feel across the entire library. You can customize them and use them in your own application just with CSS — no preprocessor required.
|
||||
|
||||
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/installation/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
|
||||
Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
|
||||
```
|
||||
|
||||
You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to violet in light mode:
|
||||
To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
.wa-theme-default {
|
||||
/* Changes the brand color to violet across the library */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-violet-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-violet-50);
|
||||
@@ -35,15 +31,11 @@ You can [customize any theme](/docs/themes/creating) just with CSS — no prepro
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
Wrapping the `:root` selector in `:where()` gives this selector 0 specificity. This allows us to define our design tokens' default values while ensuring they can be cleanly overridden as needed.
|
||||
:::
|
||||
|
||||
For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
|
||||
For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
|
||||
|
||||
## Components
|
||||
|
||||
While themes offer a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
|
||||
Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
|
||||
|
||||
Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
|
||||
|
||||
@@ -130,77 +122,3 @@ CSS parts have a few important advantages:
|
||||
- It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
|
||||
|
||||
Most (but not all) components expose parts. You can find them in each component's API documentation under the "CSS Parts" section.
|
||||
|
||||
## Native Elements
|
||||
|
||||
If you're using [native styles](/docs/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
|
||||
|
||||
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
|
||||
```html {.example}
|
||||
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
|
||||
<br />
|
||||
<label>
|
||||
<input type="checkbox" class="pinkify" />
|
||||
HTML checkbox
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.pinkify,
|
||||
input[type="checkbox"].pinkify {
|
||||
--background-color-checked: hotpink;
|
||||
--border-color-checked: hotpink;
|
||||
--border-width: 3px;
|
||||
--checked-icon-color: lavenderblush;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
|
||||
```html {.example}
|
||||
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
|
||||
<br />
|
||||
<label>
|
||||
<input type="checkbox" class="purpleify" />
|
||||
HTML checkbox
|
||||
</label>
|
||||
|
||||
<style>
|
||||
wa-checkbox.purpleify::part(control),
|
||||
input[type="checkbox"].purpleify {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
wa-checkbox.purpleify:state(checked)::part(control),
|
||||
input[type="checkbox"].purpleify:checked {
|
||||
background-color: darkorchid;
|
||||
border-color: darkorchid;
|
||||
color: lavender;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
## Style Utilities
|
||||
|
||||
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
|
||||
|
||||
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
|
||||
```html {.example}
|
||||
<wa-callout appearance="outlined filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>appearance="outlined"</code>
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-outlined wa-filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Here's a callout with <code>class="wa-outlined"</code>
|
||||
</wa-callout>
|
||||
|
||||
<style>
|
||||
wa-callout:is(
|
||||
[appearance~="outlined"],
|
||||
.wa-outlined
|
||||
) {
|
||||
border-left-width: var(--wa-panel-border-radius);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Inheritance & Default value tests
|
||||
wide: true
|
||||
---
|
||||
|
||||
## Variant
|
||||
|
||||
{%- set variantDefaults = {
|
||||
button: 'neutral',
|
||||
tag: 'neutral',
|
||||
badge: 'brand',
|
||||
callout: 'brand'
|
||||
} %}
|
||||
{%- set variants = ['', 'neutral', 'brand'] %}
|
||||
|
||||
### Defaults
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for element, default in variantDefaults %}
|
||||
<tr>
|
||||
<th>{{ element | capitalize }}</th>
|
||||
<td><wa-{{ element }}>{{ default | capitalize }}</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="neutral">Neutral</wa-{{ element }}></td>
|
||||
<td><wa-{{ element }} variant="brand">Brand</wa-{{ element }}></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
|
||||
### Nested elements
|
||||
|
||||
{% set containers = [
|
||||
{parent: 'callout', child: 'button'},
|
||||
{parent: 'callout', child: 'callout'},
|
||||
{parent: 'button', child: 'badge'}
|
||||
] %}
|
||||
|
||||
{% for container in containers %}
|
||||
{% set parent = container.parent %}
|
||||
{% set child = container.child %}
|
||||
|
||||
#### {{ child | capitalize }} in {{ parent | capitalize }}
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{% if parent == child -%}
|
||||
<th>👇 Parent / Child 👉</th>
|
||||
{% else %}
|
||||
<th>👇 {{ parent | capitalize }} / {{ child | capitalize }} 👉</th>
|
||||
{%- endif %}
|
||||
<th>Default</th>
|
||||
<th>Neutral</th>
|
||||
<th>Brand</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for parentVariant in variants %}
|
||||
{% set parentContent = (parentVariant | capitalize or 'Default') if parent == 'button' %}
|
||||
|
||||
<tr>
|
||||
<th>{{ parentVariant | capitalize or 'Default' }}</th>
|
||||
{% for childVariant in variants -%}
|
||||
{% set childContent = (childVariant or parentVariant or variantDefaults[child]) | capitalize %}
|
||||
{% set childContent = childContent[0] if child == 'badge' else childContent %}
|
||||
<td><wa-{{ parent }}{{ parentVariant | attr('variant') }}>
|
||||
{{ parentContent }}
|
||||
<wa-{{ child }}{{ childVariant | attr('variant') }}>{{ childContent }}</wa-{{ child }}>
|
||||
</wa-{{ parent }}></td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
```
|
||||
{% endfor %}
|
||||
352
docs/docs/experimental/sandbox.md
Normal file
352
docs/docs/experimental/sandbox.md
Normal file
@@ -0,0 +1,352 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
## Card
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-image with-footer class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Alerts
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand">
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="neutral">
|
||||
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take affect on next login.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</wa-callout>
|
||||
<br />
|
||||
<wa-callout variant="danger">
|
||||
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
## Badges and Tags
|
||||
|
||||
```html {.example}
|
||||
<wa-badge variant="brand">Brand</wa-badge>
|
||||
<wa-badge variant="success">Success</wa-badge>
|
||||
<wa-badge variant="neutral">Neutral</wa-badge>
|
||||
<wa-badge variant="warning">Warning</wa-badge>
|
||||
<wa-badge variant="danger">Danger</wa-badge>
|
||||
<br />
|
||||
<wa-tag variant="brand">Brand</wa-tag>
|
||||
<wa-tag variant="success">Success</wa-tag>
|
||||
<wa-tag variant="neutral">Neutral</wa-tag>
|
||||
<wa-tag variant="warning">Warning</wa-tag>
|
||||
<wa-tag variant="danger">Danger</wa-tag>
|
||||
```
|
||||
|
||||
## Buttons
|
||||
|
||||
```html {.example}
|
||||
<wa-button variant="brand">Brand</wa-button>
|
||||
<wa-button variant="success">Success</wa-button>
|
||||
<wa-button variant="neutral">Neutral</wa-button>
|
||||
<wa-button variant="warning">Warning</wa-button>
|
||||
<wa-button variant="danger">Danger</wa-button>
|
||||
<br /><br />
|
||||
<wa-button variant="brand" appearance="outlined">Brand</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Success</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Warning</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Danger</wa-button>
|
||||
<br /><br />
|
||||
<wa-button appearance="plain">Text</wa-button>
|
||||
<br /><br />
|
||||
<wa-radio-group label="Radio button group" name="a" value="1">
|
||||
<wa-radio-button value="1">Option 1</wa-radio-button>
|
||||
<wa-radio-button value="2">Option 2</wa-radio-button>
|
||||
<wa-radio-button value="3">Option 3</wa-radio-button>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
## Form controls
|
||||
|
||||
```html {.example}
|
||||
<wa-checkbox>Unchecked</wa-checkbox>
|
||||
<br />
|
||||
<wa-checkbox checked>Checked</wa-checkbox>
|
||||
<br /><br />
|
||||
<wa-radio-group label="Radio" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
<br />
|
||||
<wa-switch>Switch off</wa-switch>
|
||||
<br />
|
||||
<wa-switch checked>Switch on</wa-switch>
|
||||
<br /><br />
|
||||
<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
|
||||
<br /><br />
|
||||
<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
|
||||
<br />
|
||||
<wa-select label="Select" multiple value="option-1 option-2">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
<wa-option value="option-5">Option 5</wa-option>
|
||||
<wa-option value="option-6">Option 6</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
## Progress
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25" style="--indicator-width: 4px;"></wa-progress-ring>
|
||||
<wa-progress-bar value="60"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
```
|
||||
|
||||
## Shadows
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
div.shadow {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
display: inline-block;
|
||||
height: 4rem;
|
||||
margin-right: 2rem;
|
||||
width: 4rem;
|
||||
}
|
||||
</style>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div>
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
|
||||
```
|
||||
|
||||
## Alignment Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
div.test-cases > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
div.alignment {
|
||||
background: linear-gradient(to bottom, lightblue, lightblue 1px, transparent 1px, transparent), linear-gradient(to top, lightblue, lightblue 1px, transparent 1px, transparent);
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
div.alignment::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - 0.5px);
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<div class="test-cases">
|
||||
<div class="alignment">
|
||||
<wa-switch size="small">OCBS</wa-switch>
|
||||
<wa-checkbox size="small">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="small">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch>OCBS</wa-switch>
|
||||
<wa-checkbox>OCBS</wa-checkbox>
|
||||
<wa-radio value="1">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-switch size="large">OCBS</wa-switch>
|
||||
<wa-checkbox size="large">OCBS</wa-checkbox>
|
||||
<wa-radio value="1" size="large">OCBS</wa-radio>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="small"></wa-input>
|
||||
<wa-select size="small" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="small"></wa-color-picker>
|
||||
<wa-button size="small">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="medium"></wa-input>
|
||||
<wa-select size="medium" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="medium"></wa-color-picker>
|
||||
<wa-button size="medium">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input size="large"></wa-input>
|
||||
<wa-select size="large" value="ocbs" multiple>
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker size="large"></wa-color-picker>
|
||||
<wa-button size="large">OCBS</wa-button>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-badge>OCBS</wa-badge>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-slider></wa-slider>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input label="AaBbCc" hint="Ipsum"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom Property Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
.wa-theme-test {
|
||||
--wa-form-control-background-color: mistyrose;
|
||||
|
||||
--wa-form-control-border-style: dotted;
|
||||
--wa-form-control-border-width: 3px;
|
||||
--wa-form-control-border-radius: 12px;
|
||||
|
||||
--wa-form-control-activated-color: mediumvioletred;
|
||||
--wa-form-control-border-color: palevioletred;
|
||||
|
||||
--wa-form-control-label-color: rosybrown;
|
||||
--wa-form-control-label-font-weight: 900;
|
||||
--wa-form-control-label-line-height: 1;
|
||||
|
||||
--wa-form-control-value-color: brown;
|
||||
--wa-form-control-value-font-weight: 900;
|
||||
--wa-form-control-value-line-height: 2;
|
||||
|
||||
--wa-form-control-placeholder-color: lightpink;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" placeholder="placeholder"></label>
|
||||
<wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
|
||||
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
|
||||
<wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
|
||||
<label><input type="checkbox" checked> Native Checkbox</label>
|
||||
<wa-checkbox checked>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="checkbox"> Native Checkbox</label>
|
||||
<wa-checkbox>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="radio" checked> Native Radio</label>
|
||||
<wa-radio checked>WA Radio</wa-radio>
|
||||
|
||||
<label><input type="radio"> Native Radio</label>
|
||||
<wa-radio>WA Radio</wa-radio>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Text Controls Tests
|
||||
|
||||
```html {.example}
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
</div>
|
||||
```
|
||||
@@ -1,75 +0,0 @@
|
||||
---
|
||||
title: Size tests
|
||||
---
|
||||
|
||||
Button size should default to `medium`:
|
||||
|
||||
```html {.example}
|
||||
<wa-button size=small>Small</wa-button>
|
||||
<wa-button>Medium</wa-button>
|
||||
<wa-button size=medium>Medium</wa-button>
|
||||
<wa-button size=large>Large</wa-button>
|
||||
```
|
||||
|
||||
If no button size is specified, it should default to that of its ancestor:
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group size="small">
|
||||
<wa-button>Small 1</wa-button>
|
||||
<wa-button>Small 2</wa-button>
|
||||
<wa-button>Small 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br><br>
|
||||
<wa-button-group>
|
||||
<wa-button>Medium 1</wa-button>
|
||||
<wa-button>Medium 2</wa-button>
|
||||
<wa-button>Medium 3</wa-button>
|
||||
</wa-button-group>
|
||||
<br><br>
|
||||
<wa-button-group size="large">
|
||||
<wa-button>Large 1</wa-button>
|
||||
<wa-button>Large 2</wa-button>
|
||||
<wa-button>Large 3</wa-button>
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
Dropdown:
|
||||
|
||||
```html {.example}
|
||||
<p>Small dropdown:
|
||||
<wa-dropdown size="small">
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>Small menu:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu size="small">
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>Small menu item:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item size="small">Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item size="small">Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item size="small">Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
<p>No size:
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Dropdown Item 1</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 2</wa-menu-item>
|
||||
<wa-menu-item>Dropdown Item 3</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
```
|
||||
@@ -65,35 +65,6 @@ All Web Awesome components that get rendered for SSR will receive the `did-ssr`
|
||||
|
||||
This can help if you need some styling prior to the element connecting.
|
||||
|
||||
### The `ssr-slots` Attribute
|
||||
|
||||
When using certain slots in a component rendered through SSR, you may need to use the `ssr-slots` attribute
|
||||
to declare which slots have content.
|
||||
|
||||
E.g. when using a `<wa-card>` component without SSR, you can do this:
|
||||
|
||||
```html
|
||||
<wa-card>
|
||||
<img src="cat.jpg" slot="image">
|
||||
<header slot=header>Card Header</header>
|
||||
Card body
|
||||
<footer slot=footer>Card Footer</footer>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
However, when server-side rendering the very same card, you need to duplicate the information about what is in the slots in the `ssr-slots` attribute:
|
||||
|
||||
```html
|
||||
<wa-card ssr-slots="image header footer">
|
||||
<img src="cat.jpg" slot="image">
|
||||
<header slot=header>Card Header</header>
|
||||
Card body
|
||||
<footer slot=footer>Card Footer</footer>
|
||||
</wa-card>
|
||||
```
|
||||
|
||||
We are hoping to eventually be able to remove this requirement.
|
||||
|
||||
### Timing Issues
|
||||
|
||||
Before setting any properties on your frontend, it is important to first wait for the element to be defined and then wait for its first update to complete.
|
||||
@@ -145,4 +116,4 @@ Here are some known issues and things we're still working on.
|
||||
- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
|
||||
- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
|
||||
- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
@@ -6,7 +6,7 @@ layout: page-outline
|
||||
|
||||
Welcome to the Web Awesome alpha release for early backers! 👋
|
||||
|
||||
==This is a very early alpha release!== For this preview, we're offering access to Web Awesome through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up everything you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
|
||||
==This is a very early alpha release!== For this preview, we're only offering access to the free components through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up the free stuff you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
|
||||
|
||||
Thank you so much for backing us!
|
||||
|
||||
@@ -20,78 +20,22 @@ As a Web Awesome backer, this early alpha release is _just for you_. Please refr
|
||||
|
||||
---
|
||||
|
||||
## Quick Start (Autoloading via CDN)
|
||||
## Autoloading via CDN (Easiest)
|
||||
|
||||
To get everything included in Web Awesome, add the following code to the `<head>` of your site:
|
||||
The autoloader is the easiest way to use Web Awesome. A lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
|
||||
```
|
||||
|
||||
This snippet includes three parts:
|
||||
1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes
|
||||
2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project
|
||||
3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
|
||||
|
||||
Now you can [start using Web Awesome!](/docs/usage)
|
||||
|
||||
:::info
|
||||
While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '{% cdnUrl 'webawesome.loader.js' %}';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Advanced Setup
|
||||
|
||||
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
|
||||
|
||||
### Installing via npm
|
||||
|
||||
An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
|
||||
|
||||
### Cherry Picking
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
|
||||
<script type="module">
|
||||
import '{% cdnUrl 'components/button/button.js' %}';
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
</script>
|
||||
```
|
||||
|
||||
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
|
||||
|
||||
:::warning
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
|
||||
### Setting the Base Path
|
||||
## Setting the Base Path
|
||||
|
||||
Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
|
||||
|
||||
@@ -126,4 +70,45 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
// Get the path to an asset, e.g. /path/to/assets/file.ext
|
||||
const assetPath = getBasePath('file.ext');
|
||||
</script>
|
||||
```
|
||||
```
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You can provide it by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
|
||||
## Cherry Picking
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
|
||||
<script type="module" data-webawesome="/path/to/web-awesome/dist">
|
||||
import '/path/to/web-awesome/dist/components/button/button.js';
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
</script>
|
||||
```
|
||||
|
||||
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
|
||||
|
||||
:::warning
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
## Using Web Awesome with npm
|
||||
|
||||
An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy Web Awesome from the CDN as shown above.
|
||||
|
||||
@@ -1,25 +1,7 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
|
||||
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.
|
||||
layout: overview
|
||||
categories: ["components", "utilities"]
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
Layout components are included in Web Awesome's [autoloader](/docs/installation/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/installation/#cherry-picking).
|
||||
|
||||
Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/native/)) by including the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, you can choose to import _only_ the utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
@@ -7,7 +7,6 @@ icon: button
|
||||
snippets:
|
||||
'<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
|
||||
'.wa-button': false
|
||||
file: styles/native/button.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -37,44 +36,34 @@ Use the [appearance utility classes](../utilities/appearance.md) to change the b
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-neutral">A + O</button>
|
||||
<button class="wa-accent wa-neutral">Accent</button>
|
||||
<button class="wa-outlined wa-neutral">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-neutral">F + O</button>
|
||||
<button class="wa-filled wa-neutral">Filled</button>
|
||||
<button class="wa-plain wa-neutral">Plain</button>
|
||||
<button class="wa-outlined wa-neutral">Outlined</button>
|
||||
<button class="wa-plain wa-neutral">Text</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-brand">A + O</button>
|
||||
<button class="wa-accent wa-brand">Accent</button>
|
||||
<button class="wa-outlined wa-brand">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-brand">F + O</button>
|
||||
<button class="wa-filled wa-brand">Filled</button>
|
||||
<button class="wa-plain wa-brand">Plain</button>
|
||||
<button class="wa-outlined wa-brand">Outlined</button>
|
||||
<button class="wa-plain wa-brand">Text</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-success">A + O</button>
|
||||
<button class="wa-accent wa-success">Accent</button>
|
||||
<button class="wa-outlined wa-success">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-success">F + O</button>
|
||||
<button class="wa-filled wa-success">Filled</button>
|
||||
<button class="wa-plain wa-success">Plain</button>
|
||||
<button class="wa-outlined wa-success">Outlined</button>
|
||||
<button class="wa-plain wa-success">Text</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-warning">A + O</button>
|
||||
<button class="wa-accent wa-warning">Accent</button>
|
||||
<button class="wa-outlined wa-warning">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-warning">F + O</button>
|
||||
<button class="wa-filled wa-warning">Filled</button>
|
||||
<button class="wa-plain wa-warning">Plain</button>
|
||||
<button class="wa-outlined wa-warning">Outlined</button>
|
||||
<button class="wa-plain wa-warning">Text</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="wa-accent wa-outlined wa-danger">A + O</button>
|
||||
<button class="wa-accent wa-danger">Accent</button>
|
||||
<button class="wa-outlined wa-danger">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-danger">F + O</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-plain wa-danger">Plain</button>
|
||||
<button class="wa-outlined wa-danger">Outlined</button>
|
||||
<button class="wa-plain wa-danger">Text</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@ component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
noAlpha: true
|
||||
file: styles/native/callout.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,7 +6,6 @@ component: checkbox
|
||||
icon: checkbox
|
||||
elements:
|
||||
"<input type=checkbox>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
|
||||
file: styles/native/checkbox.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,25 +4,6 @@ description: 'Content styles apply your Web Awesome theme to HTML text content,
|
||||
tags: content
|
||||
layout: element
|
||||
icon: skeleton
|
||||
elements:
|
||||
"<h1>-<h6>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
|
||||
"<blockquote>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
|
||||
"<strong>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong
|
||||
"<em>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em
|
||||
"<u>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u
|
||||
"<del>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del
|
||||
"<ins>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
|
||||
"<s>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s
|
||||
"<small>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
|
||||
"<sub>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub
|
||||
"<sup>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
|
||||
"<abbr>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr
|
||||
"<kbd>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd
|
||||
"<mark>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark
|
||||
"<a>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
|
||||
"<code>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
|
||||
"<img>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
|
||||
file: styles/native/content.css
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ component: details
|
||||
icon: details
|
||||
elements:
|
||||
"<details>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
|
||||
file: styles/native/details.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,7 +6,6 @@ icon: dialog
|
||||
elements:
|
||||
"<dialog>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
|
||||
component: dialog
|
||||
file: styles/native/dialog.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Native Styles
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
See the [installation instructions](#installation) to use native styles in your project.
|
||||
description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
|
||||
layout: overview
|
||||
categories: ['forms', 'apps', 'content']
|
||||
override:tags: []
|
||||
@@ -20,7 +19,7 @@ To use all Web Awesome page styles (including [utilities](/docs/utilities/)), in
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include styles for native elements:
|
||||
Or, to _only_ include styles for built-in elements:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
|
||||
|
||||
@@ -6,7 +6,6 @@ icon: input
|
||||
component: input
|
||||
elements:
|
||||
"<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -7,7 +7,6 @@ elements:
|
||||
"<ul>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
|
||||
"<ol>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
|
||||
"<dl>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
|
||||
file: styles/native/lists.css
|
||||
---
|
||||
|
||||
## Unordered Lists
|
||||
|
||||
@@ -7,7 +7,6 @@ status: experimental
|
||||
component: progress-bar
|
||||
elements:
|
||||
"<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
|
||||
file: styles/native/progress.css
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -6,7 +6,6 @@ icon: radio-group
|
||||
component: radio
|
||||
elements:
|
||||
"<input type=radio>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
|
||||
file: styles/native/radio.css
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -6,7 +6,6 @@ icon: select
|
||||
component: select
|
||||
elements:
|
||||
"<select>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
|
||||
file: styles/native/select.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -7,7 +7,6 @@ icon: slider
|
||||
component: slider
|
||||
elements:
|
||||
"<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
|
||||
file: styles/native/slider.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -4,7 +4,6 @@ description: 'Table styles apply your Web Awesome theme to the HTML table conten
|
||||
tags: content
|
||||
elements:
|
||||
"<table>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
|
||||
file: styles/native/tables.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,7 +6,6 @@ icon: textarea
|
||||
component: textarea
|
||||
elements:
|
||||
"<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -12,26 +12,16 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
|
||||
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
|
||||
:::
|
||||
|
||||
## 3.0.0-alpha.10
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
|
||||
- `wa-input` => `input`
|
||||
- `wa-change` => `change`
|
||||
- `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
|
||||
- `wa-focus` => `focus` (this event will no longer bubble, use `focusin` for a bubbling version)
|
||||
- `wa-focus` => `focus` (this event will no longer bubble)
|
||||
- Added `.wa-callout` utility class
|
||||
- Added the `orientation` attribute to `<wa-radio-group>` to support vertical and horizontal radio items
|
||||
- Added docs for visual tests
|
||||
- Added docs on how to cherry-pick native styles
|
||||
- Changed the behavior of the `variant` and `size` attributes so that nested components that support these attributes but do not have them set inherit the values set on their ancestors. Additionally:
|
||||
- Added `size` attribute to `<wa-dropdown>`, `<wa-button-group>`, `<wa-menu>`, `<wa-rating>`, `<wa-card>`
|
||||
- Added `variant` attribute to `<wa-button-group>`
|
||||
- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
|
||||
- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
|
||||
- Fixed a bug in `<wa-textarea>` that caused empty controls to submit a value if the initial value was deleted a certain way
|
||||
- Fixed a bug in `<input>`, `<textarea>`, and `<select>` styles that prevented full-width controls from using 100% width when wrapped in a `<label>`
|
||||
- Fixed a bug in `<select>` styles that caused the caret to block interactions and prevented the caret from rendering unless wrapped in a `<label>`
|
||||
- Fixed a bug in `<wa-checkbox>` that caused hints to render inline with the label
|
||||
|
||||
## 3.0.0-alpha.9
|
||||
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
---
|
||||
title: Visual Tests
|
||||
description: TODO
|
||||
layout: page
|
||||
wide: true
|
||||
---
|
||||
|
||||
<style>
|
||||
p {
|
||||
max-width: 90ch;
|
||||
}
|
||||
tbody {
|
||||
& .wa-grid {
|
||||
--min-column-size: 5ch;
|
||||
}
|
||||
& tr th:first-of-type {
|
||||
width: 20ch;
|
||||
}
|
||||
& th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
& tr:hover {
|
||||
background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
|
||||
}
|
||||
}
|
||||
wa-divider {
|
||||
--width: var(--wa-border-width-m);
|
||||
--spacing: var(--wa-space-3xl);
|
||||
}
|
||||
.test-failure::before {
|
||||
content: '\f071';
|
||||
color: red;
|
||||
font-family: 'Font Awesome 6 Duotone', 'Font Awesome 6 Free';
|
||||
font-size: 1em;
|
||||
font-weight: 900;
|
||||
margin-inline-end: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
|
||||
With so many ways to build with and use Web Awesome components, visual tests help ensure consistency and prevent broken styles from leaking into production.
|
||||
|
||||
These tests can come in handy when creating or customizing your own theme. Look through each test case to make sure that custom styles in your theme cover all of the attributes, utilities, and built-in styles Web Awesome offers.
|
||||
|
||||
Known test failures that affect the entire library, regardless of theme, are indicated by <wa-icon name="triangle-exclamation" family="duotone" style="color: red;" label="alert icon"></wa-icon> and will be addressed in a future release.
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="appearance">Appearance</wa-tab>
|
||||
<wa-tab panel="alignment">Alignment</wa-tab>
|
||||
<wa-tab panel="color">Color</wa-tab>
|
||||
<wa-tab panel="harmony">Harmony</wa-tab>
|
||||
<wa-tab panel="native">Native Styles</wa-tab>
|
||||
<wa-tab panel="size">Size</wa-tab>
|
||||
|
||||
<wa-tab-panel name="appearance">
|
||||
|
||||
## Appearance
|
||||
|
||||
Appearance tests ensure that both the `appearance` attribute and `.wa-[appearance]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended look and feel.
|
||||
|
||||
{% include 'visual-tests/appearance.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="alignment">
|
||||
|
||||
## Alignment
|
||||
|
||||
Alignment tests reveal the top boundary, vertical center, and bottom boundary of components. These help to evaluate how well components align with one another when arranged horizontally.
|
||||
|
||||
{% include 'visual-tests/alignment.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="color">
|
||||
|
||||
## Color
|
||||
|
||||
Color tests ensure that both the `variant` attribute and `.wa-[variant]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably to give the component the intended semantic color.
|
||||
|
||||
{% include 'visual-tests/color.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="harmony">
|
||||
|
||||
## Harmony
|
||||
|
||||
Harmony tests show how related components look together. These can help validate design choices or reveal where design intervention is needed to get a consistent, harmonious look and feel.
|
||||
|
||||
{% include 'visual-tests/harmony.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="native">
|
||||
|
||||
## Native Styles
|
||||
|
||||
Native styles tests ensure that supported native elements and component utilities look the same as their Web Awesome component counterparts. Native elements and component utilities may also support the same [appearance](/docs/utilities/appearance/), [color](/docs/utilities/color/), and [size](/docs/utilities/size/) utilities as components.
|
||||
|
||||
{% include 'visual-tests/native.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="size">
|
||||
|
||||
## Size
|
||||
|
||||
Size tests ensure that both the `size` attribute and `.wa-size-[s|m|l]` classes have identical results for components that support them. Developers should be able to use both of these interchangeably on components to get the intended size.
|
||||
|
||||
{% include 'visual-tests/size.njk' %}
|
||||
|
||||
</wa-tab-panel>
|
||||
|
||||
</wa-tab-group>
|
||||
17
docs/docs/themes/demo.njk
vendored
17
docs/docs/themes/demo.njk
vendored
@@ -19,6 +19,10 @@ eleventyComputed:
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ theme.data.title }}</h1>
|
||||
<p id="mix_and_match" hidden class="wa-size-s"></p>
|
||||
<wa-button href="/docs/themes/remixed/?base={{ theme.fileSlug }}" class="remix-link" size="small" variant="brand" target="_parent">
|
||||
<wa-icon name="merge"></wa-icon>
|
||||
Remix
|
||||
</wa-button>
|
||||
<p>{% include 'status.njk' %}</p>
|
||||
<p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
|
||||
</header>
|
||||
@@ -39,12 +43,12 @@ function updateTheme() {
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
let script = document.currentScript;
|
||||
const stylesheetURLs = {
|
||||
colors: id => `/dist/styles/themes/${ id }/color.css`,
|
||||
color: id => `/dist/styles/themes/${ id }/color.css`,
|
||||
palette: id => `/dist/styles/color/${ id }.css`,
|
||||
typography: id => `/dist/styles/themes/${ id }/typography.css`
|
||||
};
|
||||
const icons = {
|
||||
colors: 'palette',
|
||||
color: 'palette',
|
||||
palette: 'swatchbook',
|
||||
typography: 'font-case'
|
||||
}
|
||||
@@ -66,11 +70,14 @@ function updateTheme() {
|
||||
}
|
||||
}
|
||||
|
||||
let isRemixed = msgs.length > 0;
|
||||
document.documentElement.classList.toggle("remixed", isRemixed);
|
||||
|
||||
for (let p of mix_and_match) {
|
||||
p.hidden = msgs.length === 0;
|
||||
if (msgs.length) {
|
||||
p.hidden = !isRemixed;
|
||||
if (isRemixed) {
|
||||
let icon =
|
||||
p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong><br> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
${ msg }</wa-badge>`).join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
5
docs/docs/themes/index.njk
vendored
5
docs/docs/themes/index.njk
vendored
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
|
||||
Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
|
||||
description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: theme
|
||||
@@ -15,7 +14,7 @@ categories:
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens section](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
|
||||
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
|
||||
|
||||
138
docs/docs/themes/remixed/index.js
vendored
Normal file
138
docs/docs/themes/remixed/index.js
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
let params = { base: 'default', palette: '', color: '', typography: '' };
|
||||
|
||||
// Find usage code snippet and prepare it
|
||||
let snippets = document.querySelectorAll('#remixed-usage ~ wa-tab-group pre > code');
|
||||
let copyButtons = document.querySelectorAll('#remixed-usage ~ wa-tab-group pre > wa-copy-button');
|
||||
let codeExamples = [];
|
||||
|
||||
for (let snippet of snippets) {
|
||||
let tokens = [...snippet.children];
|
||||
let base = tokens.shift();
|
||||
let [palette, color, typography] = tokens;
|
||||
|
||||
codeExamples.push({ snippet, base, palette, color, typography });
|
||||
|
||||
// Remove non-base tokens
|
||||
for (let token of tokens) {
|
||||
let whitespace = token.previousSibling;
|
||||
|
||||
if (whitespace.nodeType === Node.TEXT_NODE) {
|
||||
// Move whitespace to beginning of node
|
||||
token.prepend(token.previousSibling);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Read URL params and apply them. This facilitates permalinks.
|
||||
if (location.search) {
|
||||
let urlParams = new URLSearchParams(location.search);
|
||||
|
||||
for (let aspect in params) {
|
||||
if (urlParams.has(aspect)) {
|
||||
params[aspect] = urlParams.get(aspect);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const selects = Object.fromEntries(
|
||||
[...document.querySelectorAll('#mix_and_match wa-select')].map(select => [select.getAttribute('name'), select]),
|
||||
);
|
||||
|
||||
document.querySelector('#mix_and_match').addEventListener(
|
||||
'change',
|
||||
function (event) {
|
||||
for (let name in selects) {
|
||||
params[name] = selects[name].value;
|
||||
}
|
||||
|
||||
render();
|
||||
},
|
||||
{ capture: true },
|
||||
);
|
||||
|
||||
function hasOverride(name) {
|
||||
if (!params[name]) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (name === 'palette') {
|
||||
return params[name] !== defaultPalettes[params.base];
|
||||
}
|
||||
|
||||
if (name !== 'base') {
|
||||
return params[name] !== params.base;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function render() {
|
||||
let demoUrl = new URL(`/docs/themes/${params.base}/demo.html`, location);
|
||||
let pageParams = new URLSearchParams(params);
|
||||
|
||||
for (let aspect in params) {
|
||||
if (aspect !== 'base' && params[aspect]) {
|
||||
demoUrl.searchParams.set(aspect, params[aspect]);
|
||||
}
|
||||
|
||||
if (!params[aspect] || (aspect === 'base' && params[aspect] === 'default') || !hasOverride(aspect)) {
|
||||
pageParams.delete(aspect);
|
||||
}
|
||||
|
||||
// Output code snippet
|
||||
if (aspect !== 'base') {
|
||||
for (let codeExample of codeExamples) {
|
||||
let token = codeExample[aspect];
|
||||
let value = params[aspect];
|
||||
|
||||
if (hasOverride(aspect)) {
|
||||
// Update code example
|
||||
let valueToken = [...token.querySelectorAll('.code-attr-value, .code-url')].pop();
|
||||
valueToken.textContent = replaceStyleSheetURL(valueToken.textContent, aspect, value);
|
||||
|
||||
// Add code example to <pre>
|
||||
codeExample.snippet.append(token);
|
||||
} else {
|
||||
token.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update selects
|
||||
if (selects[aspect].value === undefined) {
|
||||
selects[aspect].setAttribute('value', params[aspect]);
|
||||
} else {
|
||||
selects[aspect].value = params[aspect];
|
||||
}
|
||||
}
|
||||
|
||||
// Update code snippet copy buttons
|
||||
for (let copyButton of copyButtons) {
|
||||
copyButton.value = copyButton.nextElementSibling.textContent;
|
||||
}
|
||||
|
||||
// Update demo URL
|
||||
demo.src = demoUrl;
|
||||
|
||||
// Update page URL. If there’s already a search, replace it.
|
||||
// We don’t want to clog the user’s history while they iterate
|
||||
let historyAction = location.search ? 'replaceState' : 'pushState';
|
||||
history[historyAction](null, '', `?${pageParams}`);
|
||||
}
|
||||
|
||||
const regexes = {
|
||||
base: /\/themes\/([a-z-]+)\.css/,
|
||||
palette: /\/color\/([a-z-]+)\.css/,
|
||||
color: /\/themes\/([a-z-]+)\/color\.css/,
|
||||
typography: /\/themes\/([a-z-]+)\/typography\.css/,
|
||||
};
|
||||
|
||||
function replaceStyleSheetURL(url, name, value) {
|
||||
let regex = regexes[name];
|
||||
return url.replace(regex, (match, oldValue) => {
|
||||
return match.replace(oldValue, value);
|
||||
});
|
||||
}
|
||||
|
||||
globalThis.params = params;
|
||||
render();
|
||||
84
docs/docs/themes/remixed/index.njk
vendored
Normal file
84
docs/docs/themes/remixed/index.njk
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
title: Remixed
|
||||
description: TODO
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
<link rel="stylesheet" href="{{ page.url }}/style.css">
|
||||
{% block header %}
|
||||
<script>
|
||||
globalThis.defaultPalettes = {
|
||||
{% for theme in collections.theme | sort -%}
|
||||
"{{ theme.fileSlug }}": "{{ theme.data.palette }}",
|
||||
{%- endfor %}
|
||||
};
|
||||
</script>
|
||||
<p id="mix_and_match" class="wa-gap-m">
|
||||
{# <strong>
|
||||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||||
Remix
|
||||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||||
</strong> #}
|
||||
<wa-select name="base" label="Base:" size="small" value="default">
|
||||
<wa-icon name="brush" slot="prefix" variant="regular"></wa-icon>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}" data-palette="{{ theme.data.palette }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" size="small">
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for p in collections.palette | sort %}
|
||||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="color" label="Colors from…" size="small" value="">
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" size="small" value="">
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
</p>
|
||||
<script src="{{ page.url }}index.js" type="module"></script>
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||||
</wa-callout>
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% markdown %}
|
||||
|
||||
## How to use your remixed theme { #remixed-usage }
|
||||
|
||||
You can import your remixed theme by importing the individual theme files from the Web Awesome CDN.
|
||||
{# Note: If you change the order here, you need to update index.js too #}
|
||||
{% set stylesheets = [
|
||||
'styles/themes/default.css',
|
||||
'styles/color/default.css',
|
||||
'styles/themes/default/color.css',
|
||||
'styles/themes/default/typography.css'
|
||||
] %}
|
||||
{% set stylesheet = 'styles/themes/default/color.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
18
docs/docs/themes/remixed/style.css
vendored
Normal file
18
docs/docs/themes/remixed/style.css
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
#mix_and_match {
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-2xs);
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
wa-select::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
wa-select[value='']::part(display-input),
|
||||
wa-option[value=''] {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
12
docs/docs/themes/showcase.css
vendored
12
docs/docs/themes/showcase.css
vendored
@@ -9,6 +9,18 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.remixed {
|
||||
.remix-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
html:not(.remixed) {
|
||||
#mix_and_match {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
color: var(--wa-color-text-quiet);
|
||||
|
||||
@@ -6,7 +6,6 @@ snippets:
|
||||
- .wa-outlined
|
||||
- .wa-filled
|
||||
- .wa-plain
|
||||
file: styles/utilities/appearance.css
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change their overall style by using an `appearance` attribute:
|
||||
|
||||
@@ -8,7 +8,6 @@ snippets:
|
||||
- .wa-success
|
||||
- .wa-warning
|
||||
- .wa-danger
|
||||
file: styles/utilities/variants.css
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
@@ -1,131 +0,0 @@
|
||||
---
|
||||
title: Reduce FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
file: styles/utilities/fouce.css
|
||||
icon: spinner
|
||||
---
|
||||
{% markdown %}
|
||||
No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
|
||||
|
||||
Here is a comparison of the loading experience with and without this utility,
|
||||
with a simulated slow loading time:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
|
||||
<div class="wa-split wa-align-items-end">
|
||||
<strong>Normal loading</strong>
|
||||
<wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
|
||||
<wa-icon name="refresh"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
<strong>With FOUCE reduction</strong>
|
||||
</div>
|
||||
|
||||
|
||||
{% set sample_card %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css">
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css">
|
||||
<script type=module>
|
||||
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
const loadScript = src => new Promise((resolve, reject) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = src;
|
||||
script.type = "module";
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/button/button.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/card/card.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/rating/rating.js");
|
||||
</script>
|
||||
|
||||
<wa-card with-footer with-image class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot=footer] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
{% endset %}
|
||||
|
||||
|
||||
<div class="iframes">
|
||||
<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
|
||||
<iframe srcdoc='{{ sample_card }}'></iframe>
|
||||
</div>
|
||||
<style>
|
||||
.iframes {
|
||||
display: flex;
|
||||
gap: var(--wa-space-m);
|
||||
margin-top: var(--wa-space-l);
|
||||
|
||||
iframe {
|
||||
flex: 1;
|
||||
height: 60ch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% markdown %}
|
||||
## How does it work?
|
||||
|
||||
The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
|
||||
- If the element is _ready_ before the timeout, it will appear immediately.
|
||||
- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
|
||||
- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
|
||||
|
||||
An element is considered ready when both of these are true:
|
||||
1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
|
||||
2. If it’s a Web Awesome component, its contents are also ready
|
||||
|
||||
## Customization
|
||||
|
||||
You can use the following CSS variables to customize the behavior:
|
||||
|
||||
| Variable | Description | Default |
|
||||
| --- | --- | --- |
|
||||
| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
|
||||
| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
|
||||
|
||||
The fade duration cannot be longer than the timeout.
|
||||
This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
|
||||
|
||||
For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
|
||||
|
||||
```css
|
||||
[ssr] {
|
||||
--wa-fouce-timeout: 0s;
|
||||
}
|
||||
```
|
||||
|
||||
You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
|
||||
Applying this class to the root element will disable the utility for the entire page.
|
||||
{% endmarkdown %}
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
tags: ["utilities", "layout"]
|
||||
file: styles/utilities/gap.css
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description: Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
description: Web Awesome provides a few style utilities to customize styles in ways that cannot necessarily be described by semantic HTML.
|
||||
Some of these correspond to component attributes, but we also expose utility classes so you can apply these styles to native elements too.
|
||||
layout: overview
|
||||
categories: ["layout"]
|
||||
override:tags: []
|
||||
@@ -21,4 +21,6 @@ Or, to _only_ include utilities:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
You can also include individual utilities following the instructions in their pages.
|
||||
{% endmarkdown %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{
|
||||
"layout": "utility",
|
||||
"layout": "block",
|
||||
"tags": ["utilities"]
|
||||
}
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.10",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -23,8 +23,7 @@ describe('<wa-badge>', () => {
|
||||
|
||||
it('should default to square styling, with the brand color', async () => {
|
||||
const el = await fixture<WaBadge>(html` <wa-badge>Badge</wa-badge> `);
|
||||
expect(el.getAttribute('variant')).to.eq(null);
|
||||
expect(el.variant).to.eq('inherit');
|
||||
expect(el.getAttribute('variant')).to.eq('brand');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -26,14 +26,8 @@ import styles from './badge.css';
|
||||
export default class WaBadge extends WebAwesomeElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, styles];
|
||||
|
||||
/** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'brand' }) variant:
|
||||
| 'brand'
|
||||
| 'neutral'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'inherit' = 'inherit';
|
||||
/** The badge's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
|
||||
|
||||
/** The badge's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';
|
||||
|
||||
@@ -3,8 +3,6 @@ import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import buttonGroupStyles from '../../styles/utilities/button-group.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import styles from './button-group.css';
|
||||
|
||||
/**
|
||||
@@ -19,7 +17,7 @@ import styles from './button-group.css';
|
||||
*/
|
||||
@customElement('wa-button-group')
|
||||
export default class WaButtonGroup extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, variantStyles, buttonGroupStyles, styles];
|
||||
static shadowStyle = [buttonGroupStyles, styles];
|
||||
|
||||
@query('slot') defaultSlot: HTMLSlotElement;
|
||||
|
||||
@@ -35,13 +33,6 @@ export default class WaButtonGroup extends WebAwesomeElement {
|
||||
/** The button group's orientation. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
/** The component's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'neutral' })
|
||||
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';
|
||||
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
|
||||
@@ -45,20 +45,20 @@ describe('<wa-button>', () => {
|
||||
});
|
||||
|
||||
describe('when an attribute is removed', () => {
|
||||
it("should return to 'inherit' when attribute removed with no initial attribute", async () => {
|
||||
it("should return to 'neutral' when attribute removed with no initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
|
||||
el.removeAttribute('variant');
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
});
|
||||
|
||||
it("should return to 'inherit' when attribute removed with an initial attribute", async () => {
|
||||
it("should return to 'neutral' when attribute removed with an initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button variant="primary">Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('primary');
|
||||
@@ -67,8 +67,8 @@ describe('<wa-button>', () => {
|
||||
el.removeAttribute('variant');
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -76,15 +76,15 @@ describe('<wa-button>', () => {
|
||||
it("should return to 'default' when property set to null with no initial attribute", async () => {
|
||||
const el = await fixture<WaButton>(html`<wa-button>Button label</wa-button>`);
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
|
||||
// @ts-expect-error Its a test. Stop.
|
||||
el.variant = null;
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
});
|
||||
|
||||
it("should return to 'default' when property set to null with an initial attribute", async () => {
|
||||
@@ -97,8 +97,8 @@ describe('<wa-button>', () => {
|
||||
el.variant = null;
|
||||
await el.updateComplete;
|
||||
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -112,9 +112,9 @@ describe('<wa-button>', () => {
|
||||
const el = await fixture<WaButton>(html` <wa-button>Button Label</wa-button> `);
|
||||
|
||||
expect(el.title).to.equal('');
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.variant).to.equal('neutral');
|
||||
expect(el.appearance).to.equal('accent');
|
||||
expect(el.size).to.equal('inherit');
|
||||
expect(el.size).to.equal('medium');
|
||||
expect(el.disabled).to.equal(false);
|
||||
expect(el.caret).to.equal(false);
|
||||
expect(el.loading).to.equal(false);
|
||||
|
||||
@@ -66,16 +66,15 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
@state() invalid = false;
|
||||
@property() title = ''; // make reactive to pass through
|
||||
|
||||
/** The button's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'neutral' })
|
||||
variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'inherit' = 'inherit';
|
||||
/** The button's theme variant. */
|
||||
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
|
||||
|
||||
/** The button's visual appearance. */
|
||||
@property({ reflect: true, default: 'accent' })
|
||||
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
|
||||
|
||||
/** The button's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
|
||||
@property({ type: Boolean, reflect: true }) caret = false;
|
||||
|
||||
@@ -27,14 +27,8 @@ import styles from './callout.css';
|
||||
export default class WaCallout extends WebAwesomeElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
|
||||
|
||||
/** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'brand' }) variant:
|
||||
| 'brand'
|
||||
| 'neutral'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'inherit' = 'inherit';
|
||||
/** The callout's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
|
||||
|
||||
/** The callout's visual appearance. */
|
||||
@property({ reflect: true }) appearance:
|
||||
@@ -46,7 +40,7 @@ export default class WaCallout extends WebAwesomeElement {
|
||||
| 'outlined accent' = 'outlined filled';
|
||||
|
||||
/** The callout's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
render() {
|
||||
return html`
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
:host {
|
||||
--space-s: var(--wa-space-l);
|
||||
--space-m: var(--wa-space-xl);
|
||||
--space-l: var(--wa-space-2xl);
|
||||
|
||||
--spacing: var(--wa-space);
|
||||
--spacing: var(--wa-space-xl);
|
||||
--border-width: var(--wa-panel-border-width);
|
||||
--border-radius: var(--wa-panel-border-radius);
|
||||
|
||||
@@ -21,7 +17,7 @@
|
||||
}
|
||||
|
||||
.image,
|
||||
:host(:not([ssr-slots~='image'])) .header {
|
||||
:host(:not([with-image])) .header {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
@@ -56,8 +52,8 @@
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
:host(:not([ssr-slots~='header'])) .header,
|
||||
:host(:not([ssr-slots~='footer'])) .footer,
|
||||
:host(:not([ssr-slots~='image'])) .image {
|
||||
:host(:not([with-header])) .header,
|
||||
:host(:not([with-footer])) .footer,
|
||||
:host(:not([with-image])) .image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import styles from './card.css';
|
||||
|
||||
/**
|
||||
@@ -23,38 +21,27 @@ import styles from './card.css';
|
||||
*
|
||||
* @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
|
||||
* @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
|
||||
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
|
||||
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value.
|
||||
*/
|
||||
@customElement('wa-card')
|
||||
export default class WaCard extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
static shadowStyle = styles;
|
||||
|
||||
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-header', type: Boolean }) withHeader = false;
|
||||
|
||||
static SSR_SLOTS = ['image', 'header', 'footer'];
|
||||
/** Renders the card with an image. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-image', type: Boolean }) withImage = false;
|
||||
|
||||
/** Renders the card with a footer. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-footer', type: Boolean }) withFooter = false;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<slot
|
||||
name="image"
|
||||
part="image"
|
||||
class="${classMap({ image: true, 'has-slotted': this.hasSlotted.has('image') })}"
|
||||
@slotchange=${this.slotUpdate}
|
||||
></slot>
|
||||
<slot
|
||||
name="header"
|
||||
part="header"
|
||||
class="${classMap({ header: true, 'has-slotted': this.hasSlotted.has('header') })}"
|
||||
@slotchange=${this.slotUpdate}
|
||||
></slot>
|
||||
<slot name="image" part="image" class="image"></slot>
|
||||
<slot name="header" part="header" class="header"></slot>
|
||||
<slot part="body" class="body"></slot>
|
||||
<slot
|
||||
name="footer"
|
||||
part="footer"
|
||||
class="${classMap({ footer: true, 'has-slotted': this.hasSlotted.has('footer') })}"
|
||||
@slotchange=${this.slotUpdate}
|
||||
></slot>
|
||||
<slot name="footer" part="footer" class="footer"></slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,7 +98,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
/** The checkbox's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Disables the checkbox. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
@@ -133,7 +133,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
this.hasInteracted = true;
|
||||
this.checked = !this.checked;
|
||||
this.indeterminate = false;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
@watch('defaultChecked')
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
--swatch-border-radius: var(--wa-border-radius-m);
|
||||
--swatch-size: 1.5rem;
|
||||
--trigger-border-radius: var(--wa-border-radius-circle);
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
|
||||
@@ -199,7 +199,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
@property() format: 'hex' | 'rgb' | 'hsl' | 'hsv' = 'hex';
|
||||
|
||||
/** Determines the size of the color picker's trigger */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Removes the button that lets users toggle between format. */
|
||||
@property({ attribute: 'no-format-toggle', type: Boolean }) noFormatToggle = false;
|
||||
@@ -273,7 +273,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
|
||||
this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';
|
||||
this.setColor(this.value || '');
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
|
||||
@@ -300,7 +300,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -330,7 +330,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -364,7 +364,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.isDraggingGridHandle = false;
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -401,7 +401,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -435,7 +435,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -469,7 +469,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -489,7 +489,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -510,7 +510,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
setTimeout(() => this.input.select());
|
||||
@@ -686,7 +686,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -702,7 +702,7 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,6 @@ import { animateWithClass } from '../../internal/animate.js';
|
||||
import { waitForEvent } from '../../internal/event.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import type WaButton from '../button/button.js';
|
||||
import type WaIconButton from '../icon-button/icon-button.js';
|
||||
import type WaMenu from '../menu/menu.js';
|
||||
@@ -44,7 +43,7 @@ import styles from './dropdown.css';
|
||||
*/
|
||||
@customElement('wa-dropdown')
|
||||
export default class WaDropdown extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
static shadowStyle = styles;
|
||||
|
||||
@query('.dropdown') popup: WaPopup;
|
||||
@query('#trigger') trigger: HTMLSlotElement;
|
||||
|
||||
@@ -91,7 +91,7 @@ export default class WaImageComparer extends WebAwesomeElement {
|
||||
|
||||
@watch('position', { waitUntilFirstUpdate: true })
|
||||
handlePositionChange() {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ describe('<wa-input>', () => {
|
||||
const el = await fixture<WaInput>(html` <wa-input></wa-input> `);
|
||||
|
||||
expect(el.type).to.equal('text');
|
||||
expect(el.size).to.equal('inherit');
|
||||
expect(el.size).to.equal('medium');
|
||||
expect(el.name).to.equal(null);
|
||||
expect(el.value).to.equal(null);
|
||||
expect(el.defaultValue).to.equal(null);
|
||||
|
||||
@@ -115,7 +115,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
|
||||
|
||||
/** The input's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** The input's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
|
||||
@@ -224,7 +224,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: 'with-hint', type: Boolean }) withHint = false;
|
||||
|
||||
private handleChange(event: Event) {
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.dispatchComposedEvent(event);
|
||||
this.value = this.input.value;
|
||||
}
|
||||
|
||||
@@ -235,7 +235,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
this.value = '';
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
this.input.focus();
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { customElement, query } from 'lit/decorators.js';
|
||||
import { WaSelectEvent } from '../../events/select.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import '../menu-item/menu-item.js';
|
||||
import type WaMenuItem from '../menu-item/menu-item.js';
|
||||
import styles from './menu.css';
|
||||
@@ -25,10 +24,7 @@ export interface MenuSelectEventDetail {
|
||||
*/
|
||||
@customElement('wa-menu')
|
||||
export default class WaMenu extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
|
||||
/** The component's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
static shadowStyle = styles;
|
||||
|
||||
@query('slot') defaultSlot: HTMLSlotElement;
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
* The radio button's size. When used inside a radio group, the size will be determined by the radio group's size so
|
||||
* this attribute can typically be omitted.
|
||||
*/
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Draws a pill-style radio button with rounded edges. */
|
||||
@property({ type: Boolean, reflect: true }) pill = false;
|
||||
|
||||
@@ -22,26 +22,6 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[part~='form-control-input'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* Horizontal */
|
||||
:host([orientation='horizontal']) [part~='form-control-input'] {
|
||||
flex-direction: row;
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
|
||||
/* When radio buttons are slotted */
|
||||
:host([orientation]) .form-control--has-radio-buttons [part~='form-control-input'] {
|
||||
gap: 0;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
/* Help text */
|
||||
[part~='hint'] {
|
||||
margin-block-start: var(--wa-space-2xs);
|
||||
|
||||
@@ -259,10 +259,8 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio');
|
||||
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
});
|
||||
|
||||
it('should apply the same size to all radio buttons', async () => {
|
||||
@@ -274,13 +272,11 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio-button');
|
||||
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
});
|
||||
|
||||
it('should update the computed size of all radio buttons when size changes', async () => {
|
||||
it('should update the size of all radio buttons when size changes', async () => {
|
||||
const radioGroup = await fixture<WaRadioGroup>(html`
|
||||
<wa-radio-group size="small">
|
||||
<wa-radio-button id="radio-1" value="1"></wa-radio-button>
|
||||
@@ -289,18 +285,14 @@ describe('<wa-radio-group>', () => {
|
||||
`);
|
||||
const [radio1, radio2] = radioGroup.querySelectorAll('wa-radio-button');
|
||||
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('small');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('small');
|
||||
expect(radio1.size).to.equal('small');
|
||||
expect(radio2.size).to.equal('small');
|
||||
|
||||
radioGroup.size = 'large';
|
||||
await radioGroup.updateComplete;
|
||||
|
||||
expect(radio1.size).to.equal('inherit');
|
||||
expect(radio1.getComputed('size')).to.equal('large');
|
||||
expect(radio2.size).to.equal('inherit');
|
||||
expect(radio2.getComputed('size')).to.equal('large');
|
||||
expect(radio1.size).to.equal('large');
|
||||
expect(radio2.size).to.equal('large');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -9,7 +9,6 @@ import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import buttonGroupStyles from '../../styles/utilities/button-group.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import '../radio-button/radio-button.js';
|
||||
import type WaRadioButton from '../radio-button/radio-button.js';
|
||||
import '../radio/radio.js';
|
||||
import type WaRadio from '../radio/radio.js';
|
||||
@@ -21,8 +20,7 @@ import styles from './radio-group.css';
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @dependency wa-radio
|
||||
* @dependency wa-radio-button
|
||||
* @dependency wa-button-group
|
||||
*
|
||||
* @slot - The default slot where `<wa-radio>` or `<wa-radio-button>` elements are placed.
|
||||
* @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
|
||||
@@ -36,7 +34,6 @@ import styles from './radio-group.css';
|
||||
* @csspart form-control - The form control that wraps the label, input, and hint.
|
||||
* @csspart form-control-label - The label's wrapper.
|
||||
* @csspart form-control-input - The input's wrapper.
|
||||
* @csspart radios - The wrapper than surrounds radio items, styled as a flex container by default.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart button-group - The button group that wraps radio buttons.
|
||||
* @csspart button-group__base - The button group's `base` part.
|
||||
@@ -66,7 +63,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
|
||||
|
||||
@state() private hasButtonGroup = false;
|
||||
@state() private hasRadioButtons = false;
|
||||
|
||||
/**
|
||||
* The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
|
||||
@@ -80,9 +76,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
/** The name of the radio group, submitted as a name/value pair with form data. */
|
||||
@property({ reflect: true }) name: string | null = null;
|
||||
|
||||
/** The orientation in which to show radio items. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'vertical';
|
||||
|
||||
private _value: string | null = null;
|
||||
|
||||
get value() {
|
||||
@@ -107,8 +100,8 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
/** The default value of the form control. Primarily used for resetting the form control. */
|
||||
@property({ attribute: 'value', reflect: true }) defaultValue: string | null = this.getAttribute('value') || null;
|
||||
|
||||
/** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
/** The radio group's size. This size will be applied to all child radios and radio buttons. */
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Ensures a child radio is checked before allowing the containing form to submit. */
|
||||
@property({ type: Boolean, reflect: true }) required = false;
|
||||
@@ -165,7 +158,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -180,13 +173,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
private async syncRadioElements() {
|
||||
const radios = this.getAllRadios();
|
||||
|
||||
// Detect the presence of radio buttons
|
||||
this.hasRadioButtons = radios.some(radio => radio.localName === 'wa-radio-button');
|
||||
|
||||
await Promise.all(
|
||||
// Sync the checked state and size
|
||||
radios.map(async radio => {
|
||||
await radio.updateComplete;
|
||||
radio.size = this.size;
|
||||
|
||||
if (!radio.disabled && radio.value === this.value) {
|
||||
radio.checked = true;
|
||||
@@ -298,7 +289,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
@@ -328,15 +319,16 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
part="form-control"
|
||||
class=${classMap({
|
||||
'form-control': true,
|
||||
'form-control--small': this.size === 'small',
|
||||
'form-control--medium': this.size === 'medium',
|
||||
'form-control--large': this.size === 'large',
|
||||
'form-control--radio-group': true,
|
||||
'form-control--has-label': hasLabel,
|
||||
'form-control--has-radio-buttons': this.hasRadioButtons,
|
||||
})}
|
||||
role="radiogroup"
|
||||
aria-labelledby="label"
|
||||
aria-describedby="hint"
|
||||
aria-errormessage="error-message"
|
||||
aria-orientation=${this.orientation}
|
||||
>
|
||||
<label
|
||||
part="form-control-label"
|
||||
@@ -350,10 +342,7 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
<slot
|
||||
part="form-control-input"
|
||||
class=${classMap({
|
||||
'wa-button-group': this.hasButtonGroup,
|
||||
'wa-button-group-vertical': this.orientation === 'vertical',
|
||||
})}
|
||||
class=${classMap({ 'wa-button-group': this.hasButtonGroup })}
|
||||
@slotchange=${this.syncRadioElements}
|
||||
></slot>
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
* The radio's size. When used inside a radio group, the size will be determined by the radio group's size so this
|
||||
* attribute can typically be omitted.
|
||||
*/
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Disables the radio. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
|
||||
@@ -1,12 +1,7 @@
|
||||
:host {
|
||||
--size-xs: var(--wa-space-s);
|
||||
--size-s: var(--wa-space-m);
|
||||
--size-m: var(--wa-space-l);
|
||||
--size-l: var(--wa-space-xl);
|
||||
|
||||
--symbol-color: var(--wa-color-neutral-fill-normal);
|
||||
--symbol-color-active: var(--wa-color-yellow-70);
|
||||
--symbol-size: var(--wa-size);
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-spacing: var(--wa-space-3xs);
|
||||
|
||||
display: inline-flex;
|
||||
@@ -31,6 +26,7 @@
|
||||
.symbols {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
font-size: var(--symbol-size);
|
||||
line-height: 0;
|
||||
color: var(--symbol-color);
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -7,7 +7,6 @@ import { WaHoverEvent } from '../../events/hover.js';
|
||||
import { clamp } from '../../internal/math.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './rating.css';
|
||||
@@ -29,11 +28,12 @@ import styles from './rating.css';
|
||||
*
|
||||
* @cssproperty --symbol-color - The inactive color for symbols.
|
||||
* @cssproperty --symbol-color-active - The active color for symbols.
|
||||
* @cssproperty --symbol-size - The size of symbols.
|
||||
* @cssproperty --symbol-spacing - The spacing to use around symbols.
|
||||
*/
|
||||
@customElement('wa-rating')
|
||||
export default class WaRating extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
static shadowStyle = styles;
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
@@ -71,9 +71,6 @@ export default class WaRating extends WebAwesomeElement {
|
||||
@property() getSymbol: (value: number) => string = () =>
|
||||
'<wa-icon name="star" library="system" variant="solid"></wa-icon>';
|
||||
|
||||
/** The component's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
private getValueFromMousePosition(event: MouseEvent) {
|
||||
return this.getValueFromXCoordinate(event.clientX);
|
||||
}
|
||||
@@ -98,7 +95,7 @@ export default class WaRating extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
this.setValue(this.getValueFromMousePosition(event));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
private setValue(newValue: number) {
|
||||
@@ -142,7 +139,7 @@ export default class WaRating extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,7 +172,7 @@ export default class WaRating extends WebAwesomeElement {
|
||||
private handleTouchEnd(event: TouchEvent) {
|
||||
this.isHovering = false;
|
||||
this.setValue(this.hoverValue);
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
|
||||
// Prevent click on mobile devices
|
||||
event.preventDefault();
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/** The popup */
|
||||
.select {
|
||||
flex: 1 1 auto;
|
||||
|
||||
@@ -162,7 +162,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: false }) value: string | string[] | null = null;
|
||||
|
||||
/** The select's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Placeholder text to show as a hint when the select is empty. */
|
||||
@property() placeholder = '';
|
||||
@@ -360,7 +360,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
});
|
||||
|
||||
if (!this.multiple) {
|
||||
@@ -490,7 +490,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -521,7 +521,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
});
|
||||
}
|
||||
|
||||
@@ -559,7 +559,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -157,7 +157,7 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
private handleChange(event: Event) {
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.dispatchComposedEvent(event);
|
||||
}
|
||||
|
||||
private handleInput() {
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
|
||||
--width: calc(var(--height) * 1.75);
|
||||
|
||||
display: inline-flex;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label {
|
||||
|
||||
@@ -77,7 +77,7 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
/** The switch's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Disables the switch. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
@@ -116,21 +116,21 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
private handleClick() {
|
||||
this.hasInteracted = true;
|
||||
this.checked = !this.checked;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
}
|
||||
|
||||
private handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
this.checked = false;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
this.checked = true;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change'));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,8 @@ describe('<wa-tag>', () => {
|
||||
describe(`with "${fixture.type}" rendering`, () => {
|
||||
it('should render default tag', async () => {
|
||||
const el = await fixture<WaTag>(html` <wa-tag>Test</wa-tag> `);
|
||||
expect(el.getAttribute('size')).to.equal(null);
|
||||
expect(el.getAttribute('variant')).to.equal(null);
|
||||
expect(el.variant).to.equal('inherit');
|
||||
expect(el.getAttribute('size')).to.equal('medium');
|
||||
expect(el.getAttribute('variant')).to.equal('neutral');
|
||||
});
|
||||
|
||||
it('should set variant by attribute', async () => {
|
||||
|
||||
@@ -32,21 +32,15 @@ export default class WaTag extends WebAwesomeElement {
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
/** The tag's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true, initial: 'neutral' }) variant:
|
||||
| 'brand'
|
||||
| 'neutral'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'danger'
|
||||
| 'inherit' = 'inherit';
|
||||
/** The tag's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
|
||||
|
||||
/** The tag's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'accent' | 'outlined accent' | 'filled' | 'outlined' | 'outlined filled' =
|
||||
'outlined filled';
|
||||
|
||||
/** The tag's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** Draws a pill-style tag with rounded edges. */
|
||||
@property({ type: Boolean, reflect: true }) pill = false;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
:host {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ describe('<wa-textarea>', () => {
|
||||
it('default properties', async () => {
|
||||
const el = await fixture<WaTextarea>(html` <wa-textarea></wa-textarea> `);
|
||||
|
||||
expect(el.size).to.equal('inherit');
|
||||
expect(el.size).to.equal('medium');
|
||||
expect(el.name).to.equal(null);
|
||||
expect(el.value).to.equal('');
|
||||
expect(el.defaultValue).to.equal('');
|
||||
@@ -199,21 +199,6 @@ describe('<wa-textarea>', () => {
|
||||
});
|
||||
|
||||
describe('when submitting a form', () => {
|
||||
it('should submit an empty value when initial value is set and then deleted', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html`
|
||||
<form><wa-textarea name="a" value="1"></wa-textarea></form>
|
||||
`);
|
||||
const textarea = form.querySelector('wa-textarea')!;
|
||||
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
await sendKeys({ press: 'Backspace' });
|
||||
await textarea.updateComplete;
|
||||
|
||||
const formData = new FormData(form);
|
||||
expect(formData.get('a')).to.equal('');
|
||||
});
|
||||
|
||||
it('should serialize its name and value with FormData', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html`
|
||||
<form><wa-textarea name="a" value="1"></wa-textarea></form>
|
||||
|
||||
@@ -63,7 +63,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
/** The name of the textarea, submitted as a name/value pair with form data. */
|
||||
@property({ reflect: true }) name: string | null = null;
|
||||
|
||||
private _value: string | null = null;
|
||||
private _value: string = '';
|
||||
|
||||
/** The current value of the input, submitted as a name/value pair with form data. */
|
||||
get value() {
|
||||
@@ -71,11 +71,11 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
return this._value ?? this.defaultValue;
|
||||
return this._value || this.defaultValue;
|
||||
}
|
||||
|
||||
@state()
|
||||
set value(val: string | null) {
|
||||
set value(val: string) {
|
||||
if (this._value === val) {
|
||||
return;
|
||||
}
|
||||
@@ -88,7 +88,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: 'value', reflect: true }) defaultValue: string = this.getAttribute('value') ?? '';
|
||||
|
||||
/** The textarea's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
|
||||
|
||||
/** The textarea's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
|
||||
@@ -207,7 +207,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
this.valueHasChanged = true;
|
||||
this.value = this.input.value;
|
||||
this.setTextareaDimensions();
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.dispatchComposedEvent(event);
|
||||
this.checkValidity();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
import type { ComplexAttributeConverter } from 'lit';
|
||||
|
||||
export const setConverter: ComplexAttributeConverter<Set<string> | null, Set<string> | null> = {
|
||||
fromAttribute(value): Set<string> | null {
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return new Set(value.split(/\s+/));
|
||||
},
|
||||
toAttribute: value => {
|
||||
if (value === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return [...(value as Set<string>)].join(' ');
|
||||
},
|
||||
};
|
||||
@@ -2,7 +2,6 @@ import type { CSSResult, CSSResultGroup, PropertyDeclaration, PropertyValues } f
|
||||
import { LitElement, defaultConverter, isServer, unsafeCSS } from 'lit';
|
||||
import { property } from 'lit/decorators.js';
|
||||
import componentStyles from '../styles/shadow/component.css';
|
||||
import { setConverter } from './converters.js';
|
||||
|
||||
// Augment Lit's module
|
||||
declare module 'lit' {
|
||||
@@ -11,7 +10,6 @@ declare module 'lit' {
|
||||
* Specifies the property’s default value
|
||||
*/
|
||||
default?: any;
|
||||
initial?: any;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,35 +24,12 @@ export default class WebAwesomeElement extends LitElement {
|
||||
/* eslint-disable-next-line */
|
||||
console.error('Element internals are not supported in your browser. Consider using a polyfill');
|
||||
}
|
||||
|
||||
this.toggleCustomState('wa-defined');
|
||||
|
||||
let Self = this.constructor as typeof WebAwesomeElement;
|
||||
for (let [property, spec] of Self.elementProperties) {
|
||||
if (spec.default === 'inherit' && spec.initial !== undefined && typeof property === 'string') {
|
||||
this.toggleCustomState(`initial-${property}-${spec.initial}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make localization attributes reactive
|
||||
@property() dir: string;
|
||||
@property() lang: string;
|
||||
|
||||
@property({
|
||||
reflect: true,
|
||||
attribute: 'ssr-slots',
|
||||
converter: setConverter,
|
||||
})
|
||||
ssrSlots: Set<string> | null = null;
|
||||
|
||||
/**
|
||||
* All slots whose slotted status we need to know on the root for SSR.
|
||||
* Subclasses are expected to override this with their own list of slots.
|
||||
*/
|
||||
static SSR_SLOTS: string[] = [];
|
||||
protected hasSlotted = new Set();
|
||||
|
||||
/**
|
||||
* One or more styles for the element’s own shadow DOM.
|
||||
* Shared component styles will automatically be added.
|
||||
@@ -87,13 +62,6 @@ export default class WebAwesomeElement extends LitElement {
|
||||
|
||||
internals: ElementInternals;
|
||||
|
||||
connectedCallback(): void {
|
||||
super.connectedCallback();
|
||||
|
||||
let Self = this.constructor as typeof WebAwesomeElement;
|
||||
this.ssrSlots = new Set(Self.SSR_SLOTS.filter(name => this.slotUpdate(name)));
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
||||
if (!this.#hasRecordedInitialProperties) {
|
||||
(this.constructor as typeof WebAwesomeElement).elementProperties.forEach(
|
||||
@@ -191,120 +159,48 @@ export default class WebAwesomeElement extends LitElement {
|
||||
return this.hasStatesSupport() ? this.internals.states.has(state) : false;
|
||||
}
|
||||
|
||||
protected async slotUpdate(target: Event | HTMLSlotElement | string) {
|
||||
await this.updateComplete;
|
||||
|
||||
let slot = target;
|
||||
|
||||
if (target instanceof Event) {
|
||||
slot = target.target as HTMLSlotElement;
|
||||
} else if (typeof target === 'string') {
|
||||
slot = this.shadowRoot!.querySelector(`slot[name="${target}"]`) as HTMLSlotElement;
|
||||
} else {
|
||||
slot = slot as HTMLSlotElement;
|
||||
}
|
||||
|
||||
if (!slot) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slotName = slot.name;
|
||||
const hasSlotted = slot.assignedNodes().length > 0;
|
||||
|
||||
let previousHasSlotted = this.hasSlotted.has(slotName);
|
||||
|
||||
if (previousHasSlotted === hasSlotted) {
|
||||
let ssrSlots = new Set(this.ssrSlots);
|
||||
|
||||
if (hasSlotted) {
|
||||
ssrSlots.add(slotName);
|
||||
} else {
|
||||
ssrSlots.delete(slotName);
|
||||
}
|
||||
|
||||
this.ssrSlots = ssrSlots;
|
||||
}
|
||||
|
||||
slot.classList.toggle('has-slotted', hasSlotted);
|
||||
return hasSlotted;
|
||||
}
|
||||
|
||||
getComputed(prop: PropertyKey) {
|
||||
let value = this[prop as keyof this];
|
||||
if (value !== 'inherit') {
|
||||
return value;
|
||||
}
|
||||
|
||||
let Self = this.constructor as typeof WebAwesomeElement;
|
||||
let options = Self.elementProperties.get(prop as string);
|
||||
|
||||
for (let element: Node = this; element.parentElement; element = element.parentElement) {
|
||||
value = (element as any)[prop as PropertyKey];
|
||||
if (value !== 'inherit') {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
// If we've reached this point and we still have `inherit`, we just ran out of parents
|
||||
return options?.initial ?? options?.default ?? value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a native event, this function cancels it and dispatches it again from the host element using the desired
|
||||
* event options.
|
||||
* Given a native event, this function ensures it's composed and, if not, dispatches it again as a composed event.
|
||||
* This is useful for relaying native events such as `change`, which will otherwise not be retargeted. It is safe,
|
||||
* albeit sloppy, to call this on composed events, as it will no-op.
|
||||
*/
|
||||
relayNativeEvent(event: Event, eventOptions?: EventInit) {
|
||||
event.stopImmediatePropagation();
|
||||
|
||||
this.dispatchEvent(
|
||||
new (event.constructor as typeof Event)(event.type, {
|
||||
...event,
|
||||
...eventOptions,
|
||||
}),
|
||||
);
|
||||
dispatchComposedEvent(event: Event) {
|
||||
if (!event.composed) {
|
||||
this.dispatchEvent(new (event.constructor as typeof Event)(event.type, { ...event, composed: true }));
|
||||
}
|
||||
}
|
||||
|
||||
static createProperty(name: PropertyKey, options?: PropertyDeclaration): void {
|
||||
if (options) {
|
||||
if (options.initial !== undefined && options.default === undefined) {
|
||||
// Set "inherit" value as default if no default is specified but the initial value is
|
||||
// This saves us having to tediously specify default: "inherit", initial: "foo" for every property
|
||||
options.default = 'inherit';
|
||||
}
|
||||
|
||||
if (options.default !== undefined && options.converter === undefined) {
|
||||
// Wrap the default converter to remove the attribute if the value is the default
|
||||
// This effectively prevents the component sprouting attributes that have not been specified
|
||||
let converter = {
|
||||
...defaultConverter,
|
||||
toAttribute(value: string, type: unknown): unknown {
|
||||
if (value === options!.default) {
|
||||
return null;
|
||||
}
|
||||
return defaultConverter.toAttribute!(value, type);
|
||||
},
|
||||
};
|
||||
options = { ...options, converter };
|
||||
}
|
||||
if (options && options.default !== undefined && options.converter === undefined) {
|
||||
// Wrap the default converter to remove the attribute if the value is the default
|
||||
// This effectively prevents the component sprouting attributes that have not been specified
|
||||
let converter = {
|
||||
...defaultConverter,
|
||||
toAttribute(value: string, type: unknown): unknown {
|
||||
if (value === options!.default) {
|
||||
return null;
|
||||
}
|
||||
return defaultConverter.toAttribute!(value, type);
|
||||
},
|
||||
};
|
||||
options = { ...options, converter };
|
||||
}
|
||||
|
||||
super.createProperty(name, options);
|
||||
|
||||
// Wrap the default accessor with logic to return the default value if the value is null
|
||||
if (options) {
|
||||
if (options.default !== undefined) {
|
||||
const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
|
||||
if (options && options.default !== undefined) {
|
||||
const descriptor = Object.getOwnPropertyDescriptor(this.prototype, name as string);
|
||||
|
||||
if (descriptor?.get) {
|
||||
const getter = descriptor.get;
|
||||
if (descriptor?.get) {
|
||||
const getter = descriptor.get;
|
||||
|
||||
Object.defineProperty(this.prototype, name, {
|
||||
...descriptor,
|
||||
get() {
|
||||
return getter.call(this) ?? options.default;
|
||||
},
|
||||
});
|
||||
}
|
||||
Object.defineProperty(this.prototype, name, {
|
||||
...descriptor,
|
||||
get() {
|
||||
return getter.call(this) ?? options.default;
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,107 +2,99 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-anodized {
|
||||
--wa-color-red-95: #fbeeeb /* oklch(95.851% 0.01469 33.071) */;
|
||||
--wa-color-red-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
|
||||
--wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
|
||||
--wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
|
||||
--wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
|
||||
--wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
|
||||
--wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
|
||||
--wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
|
||||
--wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
|
||||
--wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
|
||||
--wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-95: #fbeeeb;
|
||||
--wa-color-red-90: #f8e0d9;
|
||||
--wa-color-red-80: #efbdb1;
|
||||
--wa-color-red-70: #e39f8d;
|
||||
--wa-color-red-60: #d1806b;
|
||||
--wa-color-red-50: #b35e49;
|
||||
--wa-color-red-40: #8e4330;
|
||||
--wa-color-red-30: #733223;
|
||||
--wa-color-red-20: #562317;
|
||||
--wa-color-red-10: #36130a;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
|
||||
--wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
|
||||
--wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
|
||||
--wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
|
||||
--wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
|
||||
--wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
|
||||
--wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
|
||||
--wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
|
||||
--wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
|
||||
--wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
|
||||
--wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-90);
|
||||
--wa-color-yellow-95: #fff2b8;
|
||||
--wa-color-yellow-90: #ffe578;
|
||||
--wa-color-yellow-80: #eac46c;
|
||||
--wa-color-yellow-70: #d5a766;
|
||||
--wa-color-yellow-60: #bd8a5e;
|
||||
--wa-color-yellow-50: #9d6a4f;
|
||||
--wa-color-yellow-40: #794f3c;
|
||||
--wa-color-yellow-30: #603d2f;
|
||||
--wa-color-yellow-20: #482b21;
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
|
||||
--wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
|
||||
--wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
|
||||
--wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
|
||||
--wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
|
||||
--wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
|
||||
--wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
|
||||
--wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
|
||||
--wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
|
||||
--wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
|
||||
--wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
|
||||
--wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
--wa-color-green-80: #6dddad;
|
||||
--wa-color-green-70: #33c685;
|
||||
--wa-color-green-60: #00aa66;
|
||||
--wa-color-green-50: #008754;
|
||||
--wa-color-green-40: #006646;
|
||||
--wa-color-green-30: #00503b;
|
||||
--wa-color-green-20: #003a2d;
|
||||
--wa-color-green-10: #00231b;
|
||||
--wa-color-green-05: #001610;
|
||||
|
||||
--wa-color-teal-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
|
||||
--wa-color-teal-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
|
||||
--wa-color-teal-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
|
||||
--wa-color-teal-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
|
||||
--wa-color-teal-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
|
||||
--wa-color-teal-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
|
||||
--wa-color-teal-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
|
||||
--wa-color-teal-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
|
||||
--wa-color-teal-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
|
||||
--wa-color-teal-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
|
||||
--wa-color-teal-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
|
||||
--wa-color-teal: var(--wa-color-teal-80);
|
||||
--wa-color-teal-95: #cbfaf9;
|
||||
--wa-color-teal-90: #9ff4f3;
|
||||
--wa-color-teal-80: #1adfdb;
|
||||
--wa-color-teal-70: #00c3be;
|
||||
--wa-color-teal-60: #1aa6a0;
|
||||
--wa-color-teal-50: #15837e;
|
||||
--wa-color-teal-40: #10635e;
|
||||
--wa-color-teal-30: #0c4e4a;
|
||||
--wa-color-teal-20: #083936;
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
|
||||
--wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
|
||||
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
|
||||
--wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
|
||||
--wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
|
||||
--wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
|
||||
--wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
|
||||
--wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
|
||||
--wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
|
||||
--wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
|
||||
--wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
|
||||
--wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-95: #ecf3ff;
|
||||
--wa-color-blue-90: #d9e7ff;
|
||||
--wa-color-blue-80: #abcaff;
|
||||
--wa-color-blue-70: #83b0fe;
|
||||
--wa-color-blue-60: #5593fe;
|
||||
--wa-color-blue-50: #3d74d2;
|
||||
--wa-color-blue-40: #2e589f;
|
||||
--wa-color-blue-30: #24457c;
|
||||
--wa-color-blue-20: #1b325b;
|
||||
--wa-color-blue-10: #101d35;
|
||||
--wa-color-blue-05: #0a1222;
|
||||
|
||||
--wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
|
||||
--wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
|
||||
--wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
|
||||
--wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
|
||||
--wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
|
||||
--wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
|
||||
--wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
|
||||
--wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
|
||||
--wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
|
||||
--wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
|
||||
--wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-95: #f5efff;
|
||||
--wa-color-indigo-90: #ede0ff;
|
||||
--wa-color-indigo-80: #d7bdff;
|
||||
--wa-color-indigo-70: #bf9efe;
|
||||
--wa-color-indigo-60: #a280fa;
|
||||
--wa-color-indigo-50: #7f5bec;
|
||||
--wa-color-indigo-40: #603dc8;
|
||||
--wa-color-indigo-30: #4c2ba5;
|
||||
--wa-color-indigo-20: #381d7f;
|
||||
--wa-color-indigo-10: #210e53;
|
||||
--wa-color-indigo-05: #150739;
|
||||
|
||||
--wa-color-violet-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
|
||||
--wa-color-violet-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
|
||||
--wa-color-violet-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
|
||||
--wa-color-violet-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
|
||||
--wa-color-violet-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
|
||||
--wa-color-violet-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
|
||||
--wa-color-violet-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
|
||||
--wa-color-violet-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
|
||||
--wa-color-violet-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
|
||||
--wa-color-violet-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
|
||||
--wa-color-violet-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-violet-95: #fbedfd;
|
||||
--wa-color-violet-90: #f7defa;
|
||||
--wa-color-violet-80: #eeb6f5;
|
||||
--wa-color-violet-70: #e590f0;
|
||||
--wa-color-violet-60: #d56ae2;
|
||||
--wa-color-violet-50: #b547be;
|
||||
--wa-color-violet-40: #952598;
|
||||
--wa-color-violet-30: #751d79;
|
||||
--wa-color-violet-20: #561658;
|
||||
--wa-color-violet-10: #340d36;
|
||||
--wa-color-violet-05: #210822;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
|
||||
--wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
|
||||
--wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
|
||||
--wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
|
||||
--wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
|
||||
--wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
|
||||
--wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
|
||||
--wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
|
||||
--wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
|
||||
--wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e2e5e8;
|
||||
--wa-color-gray-80: #c2c9d0;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #657888;
|
||||
--wa-color-gray-40: #435c6f;
|
||||
--wa-color-gray-30: #2d485d;
|
||||
--wa-color-gray-20: #18354a;
|
||||
--wa-color-gray-10: #012034;
|
||||
--wa-color-gray-05: #001421;
|
||||
}
|
||||
|
||||
@@ -2,107 +2,99 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-bright {
|
||||
--wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
|
||||
--wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
|
||||
--wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
|
||||
--wa-color-red-70: #ff8e8e /* oklch(76.851% 0.13692 20.73) */;
|
||||
--wa-color-red-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
|
||||
--wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
|
||||
--wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
|
||||
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
|
||||
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
|
||||
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
|
||||
--wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb7b7;
|
||||
--wa-color-red-70: #ff8e8e;
|
||||
--wa-color-red-60: #fd5f5f;
|
||||
--wa-color-red-50: #de3131;
|
||||
--wa-color-red-40: #b40917;
|
||||
--wa-color-red-30: #910000;
|
||||
--wa-color-red-20: #6d0000;
|
||||
--wa-color-red-10: #450000;
|
||||
--wa-color-red-05: #300000;
|
||||
|
||||
--wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
|
||||
--wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
|
||||
--wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
|
||||
--wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
|
||||
--wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
|
||||
--wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
|
||||
--wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
|
||||
--wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
|
||||
--wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
|
||||
--wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
|
||||
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-60);
|
||||
--wa-color-yellow-95: #fef3c1;
|
||||
--wa-color-yellow-90: #fee682;
|
||||
--wa-color-yellow-80: #fbc217;
|
||||
--wa-color-yellow-70: #f39b00;
|
||||
--wa-color-yellow-60: #e67700;
|
||||
--wa-color-yellow-50: #b75d00;
|
||||
--wa-color-yellow-40: #8c4600;
|
||||
--wa-color-yellow-30: #6f3600;
|
||||
--wa-color-yellow-20: #532600;
|
||||
--wa-color-yellow-10: #341500;
|
||||
--wa-color-yellow-05: #220c00;
|
||||
|
||||
--wa-color-green-95: #e0fae4 /* oklch(96.026% 0.03986 149.82) */;
|
||||
--wa-color-green-90: #baf4c2 /* oklch(91.456% 0.0897 148.52) */;
|
||||
--wa-color-green-80: #73e085 /* oklch(81.974% 0.16188 147.55) */;
|
||||
--wa-color-green-70: #46c65c /* oklch(73.25% 0.18463 146.42) */;
|
||||
--wa-color-green-60: #33aa49 /* oklch(65.121% 0.17208 146.32) */;
|
||||
--wa-color-green-50: #2a863c /* oklch(54.872% 0.13954 146.82) */;
|
||||
--wa-color-green-40: #20662e /* oklch(45.254% 0.11199 147.1) */;
|
||||
--wa-color-green-30: #194f24 /* oklch(38.029% 0.09087 147.43) */;
|
||||
--wa-color-green-20: #123a1a /* oklch(31.086% 0.07165 147.58) */;
|
||||
--wa-color-green-10: #0b2210 /* oklch(22.733% 0.04522 148.82) */;
|
||||
--wa-color-green-05: #07150a /* oklch(17.871% 0.03021 149.94) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
--wa-color-green-95: #e0fae4;
|
||||
--wa-color-green-90: #baf4c2;
|
||||
--wa-color-green-80: #73e085;
|
||||
--wa-color-green-70: #46c65c;
|
||||
--wa-color-green-60: #33aa49;
|
||||
--wa-color-green-50: #2a863c;
|
||||
--wa-color-green-40: #20662e;
|
||||
--wa-color-green-30: #194f24;
|
||||
--wa-color-green-20: #123a1a;
|
||||
--wa-color-green-10: #0b2210;
|
||||
--wa-color-green-05: #07150a;
|
||||
|
||||
--wa-color-teal-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
|
||||
--wa-color-teal-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
|
||||
--wa-color-teal-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
|
||||
--wa-color-teal-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
|
||||
--wa-color-teal-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
|
||||
--wa-color-teal-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
|
||||
--wa-color-teal-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
|
||||
--wa-color-teal-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
|
||||
--wa-color-teal-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
|
||||
--wa-color-teal-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
|
||||
--wa-color-teal-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-teal-95: #d8fbf0;
|
||||
--wa-color-teal-90: #a4f5dd;
|
||||
--wa-color-teal-80: #51e1b5;
|
||||
--wa-color-teal-70: #1cc693;
|
||||
--wa-color-teal-60: #0da97a;
|
||||
--wa-color-teal-50: #088660;
|
||||
--wa-color-teal-40: #066549;
|
||||
--wa-color-teal-30: #054f39;
|
||||
--wa-color-teal-20: #043a2a;
|
||||
--wa-color-teal-10: #022319;
|
||||
--wa-color-teal-05: #01160f;
|
||||
|
||||
--wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
|
||||
--wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
|
||||
--wa-color-blue-80: #94d0fe /* oklch(83.329% 0.08941 242.12) */;
|
||||
--wa-color-blue-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
|
||||
--wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
|
||||
--wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
|
||||
--wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
|
||||
--wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
|
||||
--wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
|
||||
--wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
|
||||
--wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-95: #e7f5ff;
|
||||
--wa-color-blue-90: #ceeaff;
|
||||
--wa-color-blue-80: #94d0fe;
|
||||
--wa-color-blue-70: #60b5f9;
|
||||
--wa-color-blue-60: #3299f0;
|
||||
--wa-color-blue-50: #1a77cc;
|
||||
--wa-color-blue-40: #165a9b;
|
||||
--wa-color-blue-30: #11477a;
|
||||
--wa-color-blue-20: #0d3459;
|
||||
--wa-color-blue-10: #071f35;
|
||||
--wa-color-blue-05: #051321;
|
||||
|
||||
--wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
|
||||
--wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
|
||||
--wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
|
||||
--wa-color-indigo-70: #96abff /* oklch(75.857% 0.12332 272.47) */;
|
||||
--wa-color-indigo-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
|
||||
--wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
|
||||
--wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
|
||||
--wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
|
||||
--wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
|
||||
--wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
|
||||
--wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-95: #edf2ff;
|
||||
--wa-color-indigo-90: #dce5ff;
|
||||
--wa-color-indigo-80: #bac8ff;
|
||||
--wa-color-indigo-70: #96abff;
|
||||
--wa-color-indigo-60: #738efc;
|
||||
--wa-color-indigo-50: #486af1;
|
||||
--wa-color-indigo-40: #354dc3;
|
||||
--wa-color-indigo-30: #293c98;
|
||||
--wa-color-indigo-20: #1e2c70;
|
||||
--wa-color-indigo-10: #121a43;
|
||||
--wa-color-indigo-05: #0b102a;
|
||||
|
||||
--wa-color-violet-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
|
||||
--wa-color-violet-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
|
||||
--wa-color-violet-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
|
||||
--wa-color-violet-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
|
||||
--wa-color-violet-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
|
||||
--wa-color-violet-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
|
||||
--wa-color-violet-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
|
||||
--wa-color-violet-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
|
||||
--wa-color-violet-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
|
||||
--wa-color-violet-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
|
||||
--wa-color-violet-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-violet-95: #f3f0ff;
|
||||
--wa-color-violet-90: #eae2ff;
|
||||
--wa-color-violet-80: #d1c0ff;
|
||||
--wa-color-violet-70: #b8a0fd;
|
||||
--wa-color-violet-60: #a080fb;
|
||||
--wa-color-violet-50: #7f57f5;
|
||||
--wa-color-violet-40: #603dc7;
|
||||
--wa-color-violet-30: #4c309c;
|
||||
--wa-color-violet-20: #372372;
|
||||
--wa-color-violet-10: #211544;
|
||||
--wa-color-violet-05: #150d2a;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
|
||||
--wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
|
||||
--wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
|
||||
--wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
|
||||
--wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
|
||||
--wa-color-gray-40: #4b5977 /* oklch(46.454% 0.05212 265.05) */;
|
||||
--wa-color-gray-30: #344566 /* oklch(39.129% 0.06051 263) */;
|
||||
--wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
|
||||
--wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
|
||||
--wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e3e5ea;
|
||||
--wa-color-gray-80: #c7cad4;
|
||||
--wa-color-gray-70: #a9afbe;
|
||||
--wa-color-gray-60: #8d95a8;
|
||||
--wa-color-gray-50: #6a7591;
|
||||
--wa-color-gray-40: #4b5977;
|
||||
--wa-color-gray-30: #344566;
|
||||
--wa-color-gray-20: #1a3356;
|
||||
--wa-color-gray-10: #0e1e35;
|
||||
--wa-color-gray-05: #081220;
|
||||
}
|
||||
|
||||
@@ -2,107 +2,99 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-classic {
|
||||
--wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
|
||||
--wa-color-red-90: #fedede /* oklch(92.701% 0.03551 17.81) */;
|
||||
--wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
|
||||
--wa-color-red-70: #fa9292 /* oklch(76.951% 0.12587 20.376) */;
|
||||
--wa-color-red-60: #ee6c6c /* oklch(68.861% 0.16125 22.227) */;
|
||||
--wa-color-red-50: #d43c3c /* oklch(58.269% 0.18916 25.263) */;
|
||||
--wa-color-red-40: #ac1e1e /* oklch(48.229% 0.17712 27.066) */;
|
||||
--wa-color-red-30: #640f0f /* oklch(32.787% 0.11797 26.73) */;
|
||||
--wa-color-red-20: #631111 /* oklch(32.78% 0.11503 26.34) */;
|
||||
--wa-color-red-10: #3b0d0d /* oklch(24.059% 0.07249 24.391) */;
|
||||
--wa-color-red-05: #260606 /* oklch(18.371% 0.05502 24.325) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedede;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
--wa-color-red-70: #fa9292;
|
||||
--wa-color-red-60: #ee6c6c;
|
||||
--wa-color-red-50: #d43c3c;
|
||||
--wa-color-red-40: #ac1e1e;
|
||||
--wa-color-red-30: #640f0f;
|
||||
--wa-color-red-20: #631111;
|
||||
--wa-color-red-10: #3b0d0d;
|
||||
--wa-color-red-05: #260606;
|
||||
|
||||
--wa-color-yellow-95: #fef2c4 /* oklch(95.928% 0.0607 95.131) */;
|
||||
--wa-color-yellow-90: #fde494 /* oklch(92.185% 0.10303 92.708) */;
|
||||
--wa-color-yellow-80: #fbc129 /* oklch(84.088% 0.16334 85.185) */;
|
||||
--wa-color-yellow-70: #f29c0b /* oklch(76.145% 0.1631 70.065) */;
|
||||
--wa-color-yellow-60: #db7e13 /* oklch(68.058% 0.15388 60.67) */;
|
||||
--wa-color-yellow-50: #af6005 /* oklch(56.918% 0.13324 58.984) */;
|
||||
--wa-color-yellow-40: #904207 /* oklch(47.288% 0.12241 49.414) */;
|
||||
--wa-color-yellow-30: #713406 /* oklch(40.01% 0.10093 50.35) */;
|
||||
--wa-color-yellow-20: #532408 /* oklch(32.223% 0.07974 47.215) */;
|
||||
--wa-color-yellow-10: #321606 /* oklch(23.771% 0.05225 48.671) */;
|
||||
--wa-color-yellow-05: #1f0c01 /* oklch(18.046% 0.04102 55.818) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-95: #fef2c4;
|
||||
--wa-color-yellow-90: #fde494;
|
||||
--wa-color-yellow-80: #fbc129;
|
||||
--wa-color-yellow-70: #f29c0b;
|
||||
--wa-color-yellow-60: #db7e13;
|
||||
--wa-color-yellow-50: #af6005;
|
||||
--wa-color-yellow-40: #904207;
|
||||
--wa-color-yellow-30: #713406;
|
||||
--wa-color-yellow-20: #532408;
|
||||
--wa-color-yellow-10: #321606;
|
||||
--wa-color-yellow-05: #1f0c01;
|
||||
|
||||
--wa-color-green-95: #e9f5ed /* oklch(95.897% 0.01651 156.91) */;
|
||||
--wa-color-green-90: #cfedd9 /* oklch(91.883% 0.04142 156.31) */;
|
||||
--wa-color-green-80: #a2d5b4 /* oklch(82.826% 0.07031 156.17) */;
|
||||
--wa-color-green-70: #6cc08a /* oklch(73.992% 0.11416 154.35) */;
|
||||
--wa-color-green-60: #38a961 /* oklch(65.365% 0.14702 151.78) */;
|
||||
--wa-color-green-50: #178640 /* oklch(54.51% 0.14175 149.98) */;
|
||||
--wa-color-green-40: #006823 /* oklch(45.073% 0.13335 147.17) */;
|
||||
--wa-color-green-30: #0d5026 /* oklch(38.028% 0.09504 150.7) */;
|
||||
--wa-color-green-20: #0c391d /* oklch(30.614% 0.06954 152.08) */;
|
||||
--wa-color-green-10: #082213 /* oklch(22.658% 0.04352 155.31) */;
|
||||
--wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
--wa-color-green-95: #e9f5ed;
|
||||
--wa-color-green-90: #cfedd9;
|
||||
--wa-color-green-80: #a2d5b4;
|
||||
--wa-color-green-70: #6cc08a;
|
||||
--wa-color-green-60: #38a961;
|
||||
--wa-color-green-50: #178640;
|
||||
--wa-color-green-40: #006823;
|
||||
--wa-color-green-30: #0d5026;
|
||||
--wa-color-green-20: #0c391d;
|
||||
--wa-color-green-10: #082213;
|
||||
--wa-color-green-05: #02140a;
|
||||
|
||||
--wa-color-teal-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
|
||||
--wa-color-teal-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
|
||||
--wa-color-teal-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
|
||||
--wa-color-teal-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
|
||||
--wa-color-teal-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
|
||||
--wa-color-teal-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
|
||||
--wa-color-teal-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
|
||||
--wa-color-teal-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
|
||||
--wa-color-teal-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
|
||||
--wa-color-teal-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
|
||||
--wa-color-teal-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
|
||||
--wa-color-teal: var(--wa-color-teal-70);
|
||||
--wa-color-teal-95: #d0fbf3;
|
||||
--wa-color-teal-90: #a9f4e8;
|
||||
--wa-color-teal-80: #5bdecd;
|
||||
--wa-color-teal-70: #36c2b3;
|
||||
--wa-color-teal-60: #12a797;
|
||||
--wa-color-teal-50: #0b8278;
|
||||
--wa-color-teal-40: #09635b;
|
||||
--wa-color-teal-30: #0a4e49;
|
||||
--wa-color-teal-20: #0a3835;
|
||||
--wa-color-teal-10: #082120;
|
||||
--wa-color-teal-05: #021413;
|
||||
|
||||
--wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
|
||||
--wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
|
||||
--wa-color-blue-80: #80d4fc /* oklch(83.114% 0.09915 230.17) */;
|
||||
--wa-color-blue-70: #37bbf5 /* oklch(74.731% 0.13762 232.44) */;
|
||||
--wa-color-blue-60: #0d9ee0 /* oklch(66.354% 0.14388 237.59) */;
|
||||
--wa-color-blue-50: #027ab9 /* oklch(55.557% 0.13184 242.23) */;
|
||||
--wa-color-blue-40: #015d8d /* oklch(45.762% 0.10698 241.38) */;
|
||||
--wa-color-blue-30: #024970 /* oklch(38.805% 0.0903 241.59) */;
|
||||
--wa-color-blue-20: #04354f /* oklch(31.306% 0.06703 238.73) */;
|
||||
--wa-color-blue-10: #05202f /* oklch(23.154% 0.04349 236.83) */;
|
||||
--wa-color-blue-05: #04121b /* oklch(17.393% 0.0282 236.81) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-95: #e5f4fe;
|
||||
--wa-color-blue-90: #c8ebfd;
|
||||
--wa-color-blue-80: #80d4fc;
|
||||
--wa-color-blue-70: #37bbf5;
|
||||
--wa-color-blue-60: #0d9ee0;
|
||||
--wa-color-blue-50: #027ab9;
|
||||
--wa-color-blue-40: #015d8d;
|
||||
--wa-color-blue-30: #024970;
|
||||
--wa-color-blue-20: #04354f;
|
||||
--wa-color-blue-10: #05202f;
|
||||
--wa-color-blue-05: #04121b;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
|
||||
--wa-color-indigo-90: #dee5fd /* oklch(92.388% 0.03348 272.78) */;
|
||||
--wa-color-indigo-80: #bec8f2 /* oklch(83.901% 0.05981 274.54) */;
|
||||
--wa-color-indigo-70: #9dabf0 /* oklch(75.639% 0.10065 274.93) */;
|
||||
--wa-color-indigo-60: #818cf7 /* oklch(67.953% 0.15693 276.94) */;
|
||||
--wa-color-indigo-50: #6063eb /* oklch(57.366% 0.20061 277.06) */;
|
||||
--wa-color-indigo-40: #4941d3 /* oklch(48.251% 0.21482 277.09) */;
|
||||
--wa-color-indigo-30: #3930ad /* oklch(40.969% 0.18954 277.17) */;
|
||||
--wa-color-indigo-20: #29247a /* oklch(32.82% 0.14032 277.91) */;
|
||||
--wa-color-indigo-10: #191843 /* oklch(23.918% 0.07895 279.64) */;
|
||||
--wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--wa-color-violet-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-violet-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-violet-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-violet-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
|
||||
--wa-color-violet-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
|
||||
--wa-color-violet-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
|
||||
--wa-color-violet-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
|
||||
--wa-color-violet-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
|
||||
--wa-color-violet-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
|
||||
--wa-color-violet-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
|
||||
--wa-color-violet-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
--wa-color-violet-95: #f7efff;
|
||||
--wa-color-violet-90: #efe0ff;
|
||||
--wa-color-violet-80: #dcbdfe;
|
||||
--wa-color-violet-70: #cb9afd;
|
||||
--wa-color-violet-60: #b976f9;
|
||||
--wa-color-violet-50: #9d46ec;
|
||||
--wa-color-violet-40: #7d22cc;
|
||||
--wa-color-violet-30: #631f9c;
|
||||
--wa-color-violet-20: #48176e;
|
||||
--wa-color-violet-10: #2e054e;
|
||||
--wa-color-violet-05: #1d0331;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
|
||||
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
|
||||
--wa-color-gray-80: #c9c9cc /* oklch(83.679% 0.00413 286.31) */;
|
||||
--wa-color-gray-70: #aeafb1 /* oklch(75.381% 0.00306 264.54) */;
|
||||
--wa-color-gray-60: #94959b /* oklch(67.089% 0.00884 278.56) */;
|
||||
--wa-color-gray-50: #72747d /* oklch(56.027% 0.01402 275.93) */;
|
||||
--wa-color-gray-40: #565861 /* oklch(46.18% 0.01474 275.83) */;
|
||||
--wa-color-gray-30: #43454d /* oklch(39.154% 0.01373 274.58) */;
|
||||
--wa-color-gray-20: #313134 /* oklch(31.432% 0.00529 286.09) */;
|
||||
--wa-color-gray-10: #1d1d20 /* oklch(23.201% 0.00571 285.95) */;
|
||||
--wa-color-gray-05: #101113 /* oklch(17.739% 0.00442 264.46) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e5e5e8;
|
||||
--wa-color-gray-80: #c9c9cc;
|
||||
--wa-color-gray-70: #aeafb1;
|
||||
--wa-color-gray-60: #94959b;
|
||||
--wa-color-gray-50: #72747d;
|
||||
--wa-color-gray-40: #565861;
|
||||
--wa-color-gray-30: #43454d;
|
||||
--wa-color-gray-20: #313134;
|
||||
--wa-color-gray-10: #1d1d20;
|
||||
--wa-color-gray-05: #101113;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user