mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 04:29:14 +00:00
Compare commits
208 Commits
remixing
...
kj/app-pat
| Author | SHA1 | Date | |
|---|---|---|---|
|
c3de5a8915 | ||
|
|
c18aa23d76 | ||
|
|
54e14a20c0 | ||
|
|
97b8e96a6e | ||
|
|
55a362b741 | ||
|
|
d9cafdafb7 | ||
|
|
1d03f7bee0 | ||
|
|
81bf6865ec | ||
|
|
a9bf1bd838 | ||
|
|
c0ca739366 | ||
|
|
a6745602d6 | ||
|
|
da4f619d95 | ||
|
|
1283a696a5 | ||
|
|
d12b97b0b0 | ||
|
|
873eb47d18 | ||
|
|
a564d3061f | ||
|
|
ef865396f2 | ||
|
|
e5c2884880 | ||
|
|
1d600a77c4 | ||
|
|
903085257d | ||
|
|
27237441a1 | ||
|
|
b0291653f8 | ||
|
|
3962c50844 | ||
|
|
db3c568ba2 | ||
|
|
4bb9805ba6 | ||
|
|
bd935fa8d5 | ||
|
|
c3e582b47b | ||
|
|
4d094a4e19 | ||
|
|
782c404bdf | ||
|
|
f1438981b2 | ||
|
|
18b88c2f5c | ||
|
|
a2d85f49a3 | ||
|
|
be00026cd3 | ||
|
|
58ed88bc5a | ||
|
|
1d14e186f3 | ||
|
|
5f672aabc2 | ||
|
|
db08e12a32 | ||
|
|
e0fc639226 | ||
|
|
e6c662b543 | ||
|
|
314801c368 | ||
|
|
dc30ed8503 | ||
|
|
e12be798b8 | ||
|
|
7f29f1b4ea | ||
|
|
3563d6a2dd | ||
|
|
007d93077f | ||
|
|
80b78aeb16 | ||
|
|
8bc8ea85a5 | ||
|
|
61a6cd9fb9 | ||
|
|
7fb3fd5982 | ||
|
|
dc580b3351 | ||
|
|
74719d4c06 | ||
|
|
47a7cdedd0 | ||
|
|
d906940726 | ||
|
|
a782470c6a | ||
|
|
de175ed4a1 | ||
|
|
3612f8fdfa | ||
|
|
bc76df4b31 | ||
|
|
d1de9a9a73 | ||
|
|
4931de8eb4 | ||
|
|
9ad7f4a6be | ||
|
|
a7457630aa | ||
|
|
e19928123f | ||
|
|
e644862f58 | ||
|
|
76529c628e | ||
|
|
62ded7b15a | ||
|
|
71e7227763 | ||
|
|
dd671e15aa | ||
|
|
2daeea0349 | ||
|
|
3cb6625c1d | ||
|
|
c4b5446d01 | ||
|
|
41affca083 | ||
|
|
65af9980f1 | ||
|
|
db592194fd | ||
|
|
132dbfabcc | ||
|
|
4fc6224464 | ||
|
|
0f9ea14033 | ||
|
|
057b76a10a | ||
|
|
4921d1c32e | ||
|
|
b466ba9d0f | ||
|
|
9c979931da | ||
|
|
898311590a | ||
|
|
5f4510f355 | ||
|
|
54d71d2319 | ||
|
|
c1ecca0169 | ||
|
|
d6a91919e0 | ||
|
|
4621094ea1 | ||
|
|
b8eeb3db23 | ||
|
|
8574270340 | ||
|
|
aa042a0a6e | ||
|
|
726dc73e2a | ||
|
|
4bfebf3249 | ||
|
|
fe81a41a6b | ||
|
|
f3628ad2d8 | ||
|
|
169337077d | ||
|
|
406d9a9708 | ||
|
|
faaf75c0a2 | ||
|
|
13b67db869 | ||
|
|
b7fdda4b03 | ||
|
|
99ad0abdd3 | ||
|
|
902e2b6367 | ||
|
|
d60e675702 | ||
|
|
414a318f0b | ||
|
|
ff8ed89645 | ||
|
|
e027ab1291 | ||
|
|
d8f97b15b4 | ||
|
|
7f3210b12d | ||
|
|
a8ed6f2c19 | ||
|
|
c7f5dc69ad | ||
|
|
eee63bdecd | ||
|
|
42381722c5 | ||
|
|
b2f9ec573f | ||
|
|
b85e59b8ca | ||
|
|
8bd69694ce | ||
|
|
7672923479 | ||
|
|
c94006c6aa | ||
|
|
91ce2f2271 | ||
|
|
9c609e44de | ||
|
|
28a8e4250a | ||
|
|
656a38cd3d | ||
|
|
9b90e56b45 | ||
|
|
a91fd07ed7 | ||
|
|
0c84a2ff37 | ||
|
|
511cca7931 | ||
|
|
2069d223f0 | ||
|
|
34aa8917a6 | ||
|
|
715c2c0def | ||
|
|
37d2455965 | ||
|
|
13b5385633 | ||
|
|
d25f3748c4 | ||
|
|
b6620ddf7e | ||
|
|
d70d4a91b1 | ||
|
|
bb1f7b2b7a | ||
|
|
9921c17d63 | ||
|
|
7f964f9b56 | ||
|
|
31eeea1630 | ||
|
|
ffda52a7cf | ||
|
|
9be7919c60 | ||
|
|
85b05fc655 | ||
|
|
52328d9805 | ||
|
|
2c89c5f510 | ||
|
|
c30f3c4b09 | ||
|
|
7e8f13b5cb | ||
|
|
97ab986425 | ||
|
|
f1fa7f713e | ||
|
|
3394a95057 | ||
|
|
eed9ddb9b3 | ||
|
|
daf5e7734d | ||
|
|
63133d0e33 | ||
|
|
5ac9e8cff1 | ||
|
|
e238e35b3b | ||
|
|
b2d74145b8 | ||
|
|
17eeccbc5d | ||
|
|
68f645e776 | ||
|
|
b3e4c59197 | ||
|
|
6080a85035 | ||
|
|
f7e088c8df | ||
|
|
80e1c05b37 | ||
|
|
99f0273783 | ||
|
|
8e13683a30 | ||
|
|
fd73542d2c | ||
|
|
bde0ed7403 | ||
|
|
8dc49f7119 | ||
|
|
25cb96aa30 | ||
|
|
360273ac27 | ||
|
|
404d59d9d6 | ||
|
|
c6d8d37871 | ||
|
|
ce1ce6caca | ||
|
|
74ecc52a15 | ||
|
|
a64cc60ad5 | ||
|
|
c5f91ec2f7 | ||
|
|
4f9af1e871 | ||
|
|
aeb25f3a7d | ||
|
|
b89ee673e6 | ||
|
|
4dddb183fd | ||
|
|
d49ed53e9a | ||
|
|
99e2ffc17b | ||
|
|
97c79c29b9 | ||
|
|
3c70c44b8a | ||
|
|
d8881c0b1e | ||
|
|
88b6fe2fbe | ||
|
|
7da9f53e27 | ||
|
|
6a0725cf00 | ||
|
|
3ff8745910 | ||
|
|
a9cc02193f | ||
|
|
9ad1c8f060 | ||
|
|
e0eaea2024 | ||
|
|
0cb72adb28 | ||
|
|
3d35f5d4e0 | ||
|
|
815cc4220b | ||
|
|
a7caf19b34 | ||
|
|
a8b7b6a93f | ||
|
|
581e47043a | ||
|
|
9ffe0cfe3c | ||
|
|
45df4a924f | ||
|
|
43eed9d15e | ||
|
|
a0ff411463 | ||
|
|
04cd027c7e | ||
|
|
a68a157ebc | ||
|
|
b2a24a3b52 | ||
|
|
cbb456ffda | ||
|
|
e0038c3125 | ||
|
|
3e5d3120b1 | ||
|
|
020f4cbaed | ||
|
|
9106bb88cf | ||
|
|
a822ab98c8 | ||
|
|
026777c085 | ||
|
|
6d87b9b24a | ||
|
|
d5affa01e9 |
@@ -13,3 +13,4 @@ package-lock.json
|
||||
tsconfig.json
|
||||
cdn
|
||||
_site
|
||||
docs/assets/scripts/prism-downloaded.js
|
||||
|
||||
@@ -94,7 +94,7 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addPlugin(highlightCodePlugin());
|
||||
|
||||
// Add copy code buttons to code blocks
|
||||
eleventyConfig.addPlugin(copyCodePlugin());
|
||||
eleventyConfig.addPlugin(copyCodePlugin);
|
||||
|
||||
// Various text replacements
|
||||
eleventyConfig.addPlugin(
|
||||
|
||||
1
docs/_data/hueRanges.js
Normal file
1
docs/_data/hueRanges.js
Normal file
@@ -0,0 +1 @@
|
||||
export { hueRanges as default } from '../assets/scripts/tweak/data.js';
|
||||
@@ -1 +1 @@
|
||||
["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
|
||||
["red", "orange", "yellow", "green", "cyan", "blue", "indigo", "purple", "pink", "gray"]
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default as default } from '../../src/styles/color/palettes.js';
|
||||
export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';
|
||||
|
||||
@@ -5,16 +5,18 @@
|
||||
<meta name="theme-color" content="#f36944">
|
||||
|
||||
<script type="module" src="/assets/scripts/code-examples.js"></script>
|
||||
<script type="module" src="/assets/scripts/copy-code.js"></script>
|
||||
|
||||
<script type="module" src="/assets/scripts/scroll.js"></script>
|
||||
<script type="module" src="/assets/scripts/turbo.js"></script>
|
||||
<script type="module" src="/assets/scripts/search.js"></script>
|
||||
<script type="module" src="/assets/scripts/outline.js"></script>
|
||||
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar-tweaks.js"></script>{% endif %}
|
||||
<script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
|
||||
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
<table class="colors wa-palette-{{ paletteId }} contrast-table" data-min-contrast="{{ minContrast }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -12,19 +12,31 @@
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<tr data-hue="{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% for tint_bg in tints -%}
|
||||
{% set color_bg = palettes[paletteId][hue][tint_bg] %}
|
||||
{% for tint_fg in tints | reverse -%}
|
||||
{% set color_fg = palettes[paletteId][hue][tint_fg] %}
|
||||
{% if (tint_fg - tint_bg) | abs == difference %}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
|
||||
{% set contrast_wcag = '' %}
|
||||
{% if color_fg and color_bg %}
|
||||
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
||||
{% endif %}
|
||||
{% set contrast_wcag = '' %}
|
||||
{% if color_fg and color_bg -%}
|
||||
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
||||
{%- endif %}
|
||||
<td v-for="contrast of [contrasts.{{ hue }}['{{ tint_bg }}']['{{ tint_fg }}']]"
|
||||
data-tint-bg="{{ tint_bg }}" data-tint-fg="{{ tint_fg }}" data-original-contrast="{{ contrast_wcag }}">
|
||||
<div v-content:number="contrast.value"
|
||||
class="color swatch" :class="{
|
||||
'value-up': contrast.value - contrast.original > 0.0001,
|
||||
'value-down': contrast.original - contrast.value > 0.0001,
|
||||
'contrast-fail': contrast.value < {{ minContrast }}
|
||||
}"
|
||||
style="--color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})"
|
||||
:style="{
|
||||
'--color': contrast.bgColor,
|
||||
color: contrast.fgColor,
|
||||
}"
|
||||
>
|
||||
{% if contrast_wcag %}
|
||||
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
|
||||
{% else %}
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
{%- if not stylesheets %}{% set stylesheets = [stylesheet] %}{% endif -%}
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab-group class="import-stylesheet-code">
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
Add the following code to the `<head>` of your page:
|
||||
```html
|
||||
{% for stylesheet in stylesheets -%}
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />{% if not loop.last %}
|
||||
{% endif %}{% endfor %}
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Simply add the following code at the top of your CSS file:
|
||||
Add the following code at the top of your CSS file:
|
||||
```css
|
||||
{% for stylesheet in stylesheets -%}
|
||||
@import url('{% cdnUrl stylesheet %}');{% if not loop.last %}
|
||||
{% endif %}{% endfor %}
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
{% if pageSubtitle -%}
|
||||
<div class="wa-caption-s">{{ pageSubtitle }}</div>
|
||||
{%- endif %}
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
<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,11 +1,14 @@
|
||||
{% set paletteId = page.fileSlug %}
|
||||
{% set tints = [80, 60, 40, 20] %}
|
||||
{% set paletteId = palette.fileSlug or page.fileSlug %}
|
||||
{% set suffixes = ['-80', '', '-20'] %}
|
||||
{% set width = 20 %}
|
||||
{% set height = 13 %}
|
||||
{% set gap_x = 3 %}
|
||||
{% set gap_y = 3 %}
|
||||
{% set height = 12 %}
|
||||
{% set height_core = 20 %}
|
||||
{% set gap_x = 4 %}
|
||||
{% set gap_y = 4 %}
|
||||
|
||||
<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
|
||||
{% set total_width = (width + gap_x) * hues|length %}
|
||||
{% set total_height = (height + gap_y) * suffixes|length + (height_core - height) %}
|
||||
<svg viewBox="0 0 {{ total_width }} {{ total_height }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
|
||||
<style>
|
||||
@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
|
||||
.palette-icon {
|
||||
@@ -15,10 +18,14 @@
|
||||
|
||||
{% for hue in hues -%}
|
||||
{% set hueIndex = loop.index0 %}
|
||||
{% for tint in tints -%}
|
||||
<rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
|
||||
width="{{ width }}" height="{{ height }}"
|
||||
fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
|
||||
{% set y = 0 %}
|
||||
{% for suffix in suffixes -%}
|
||||
{% set swatch_height = height if suffix else height_core %}
|
||||
|
||||
<rect x="{{ hueIndex * (width + gap_x) }}" y="{{ y }}"
|
||||
width="{{ width }}" height="{{ swatch_height }}"
|
||||
fill="var(--wa-color-{{ hue }}{{ suffix }})" rx="2" />
|
||||
{% set y = y + swatch_height + gap_y %}
|
||||
{%- endfor %}
|
||||
{% endfor %}
|
||||
</svg>
|
||||
|
||||
10
docs/_includes/svgs/preview.njk
Normal file
10
docs/_includes/svgs/preview.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="120" height="87" viewBox="0 0 240 178" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
<rect y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
<rect width="67" height="19" rx="6" fill="#D9D9D9"/>
|
||||
<rect x="87" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
<rect x="174" y="39" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
<rect x="174" y="7" width="67" height="4.75" rx="2.375" fill="#D9D9D9"/>
|
||||
<rect x="87" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
<rect x="174" y="115" width="67" height="63" rx="12" fill="#D9D9D9"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 631 B |
24
docs/_includes/svgs/theme-color.njk
Normal file
24
docs/_includes/svgs/theme-color.njk
Normal file
@@ -0,0 +1,24 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-color-icon wa-theme-{{ themeId }}">
|
||||
<div class="wa-brand wa-accent">A</div>
|
||||
<div class="wa-brand wa-outlined">A</div>
|
||||
<div class="wa-brand wa-filled">A</div>
|
||||
<div class="wa-brand wa-plain">A</div>
|
||||
{# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
|
||||
|
||||
<div class="wa-neutral wa-accent">A</div>
|
||||
<div class="wa-neutral wa-outlined">A</div>
|
||||
<div class="wa-neutral wa-filled">A</div>
|
||||
<div class="wa-neutral wa-plain">A</div>
|
||||
{# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
16
docs/_includes/svgs/theme-typography.njk
Normal file
16
docs/_includes/svgs/theme-typography.njk
Normal file
@@ -0,0 +1,16 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="/dist/styles/native/content.css">
|
||||
<link rel="stylesheet" href="/dist/styles/native/blockquote.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
|
||||
<h3>Title</h3>
|
||||
<p>Body text</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -2,7 +2,7 @@
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M48.8665 59.1993L33.7329 33H64C63.8352 38.2705 62.3694 43.4244 59.7264 48C57.0833 52.5756 53.3507 56.4213 48.8665 59.1993Z" fill="var(--wa-color-green-70)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C26.714 64 21.5155 62.6919 16.8665 60.1993L32 34L47.1336 60.1993C42.4845 62.6919 37.286 64 32 64Z" fill="var(--wa-color-blue-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 48C1.63063 43.4244 0.164839 38.2706 0 33L30.2671 33L15.1336 59.1993C10.6493 56.4213 6.91666 52.5756 4.27365 48Z" fill="var(--wa-color-indigo-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-violet-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.27365 16C6.91667 11.4244 10.6493 7.57868 15.1336 4.80072L30.2671 31L0 31C0.16484 25.7295 1.63063 20.5756 4.27365 16Z" fill="var(--wa-color-purple-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M32 30L16.8665 3.80072C21.5155 1.30813 26.714 0 32 0C37.286 0 42.4845 1.30813 47.1336 3.80072L32 30Z" fill="var(--wa-color-red-60)"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.7329 31L48.8665 4.80072C53.3507 7.57868 57.0833 11.4244 59.7264 16C62.3694 20.5756 63.8352 25.7294 64 31L33.7329 31Z" fill="var(--wa-color-yellow-80)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -23,7 +23,7 @@
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95);">
|
||||
<wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
|
||||
77
docs/_includes/visual-tests/alignment.njk
Normal file
77
docs/_includes/visual-tests/alignment.njk
Normal file
@@ -0,0 +1,77 @@
|
||||
```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>
|
||||
```
|
||||
799
docs/_includes/visual-tests/appearance.njk
Normal file
799
docs/_includes/visual-tests/appearance.njk
Normal file
@@ -0,0 +1,799 @@
|
||||
<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><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><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><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>
|
||||
698
docs/_includes/visual-tests/color.njk
Normal file
698
docs/_includes/visual-tests/color.njk
Normal file
@@ -0,0 +1,698 @@
|
||||
<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>
|
||||
32
docs/_includes/visual-tests/harmony.njk
Normal file
32
docs/_includes/visual-tests/harmony.njk
Normal file
@@ -0,0 +1,32 @@
|
||||
<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>
|
||||
```
|
||||
745
docs/_includes/visual-tests/native.njk
Normal file
745
docs/_includes/visual-tests/native.njk
Normal file
@@ -0,0 +1,745 @@
|
||||
<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>
|
||||
856
docs/_includes/visual-tests/size.njk
Normal file
856
docs/_includes/visual-tests/size.njk
Normal file
@@ -0,0 +1,856 @@
|
||||
<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/#autoloading">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/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.
|
||||
</p>
|
||||
|
||||
<wa-tab-group label="How would you like to import this component?">
|
||||
|
||||
@@ -14,11 +14,19 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{# 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 file %}
|
||||
{% markdown %}
|
||||
## Opting In to Native {{ title }} Styles
|
||||
|
||||
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 %}
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl)"></wa-divider> {# Temp fix for spacing issue #}
|
||||
{{ content | safe }}
|
||||
{% endif %}
|
||||
|
||||
@@ -1,31 +1,186 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% set paletteId = page.fileSlug %}
|
||||
|
||||
{% block afterContent %}
|
||||
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
|
||||
|
||||
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
|
||||
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{% block head %}
|
||||
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
|
||||
<link href="{{ page.url }}../tweak.css" rel="stylesheet">
|
||||
<script type="module" src="{{ page.url }}../tweak.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<div id="palette-app" data-palette-id="{{ paletteId }}">
|
||||
<div
|
||||
:class="{
|
||||
tweaking: tweaking.chroma,
|
||||
'tweaking-chroma': tweaking.chroma,
|
||||
'tweaking-hue': tweaking.chroma,
|
||||
'tweaking-gray-chroma': tweaking.grayChroma,
|
||||
'tweaked-chroma': tweaked?.chroma,
|
||||
'tweaked-hue': tweaked?.hue,
|
||||
'tweaked-any': tweaked
|
||||
}"
|
||||
:style="{
|
||||
'--chroma-scale': chromaScale,
|
||||
'--gray-chroma': tweaked?.grayChroma ? grayChroma : '',
|
||||
}">
|
||||
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
|
||||
<h1 v-if="saved" class="title">
|
||||
{% raw %}{{ saved.title }}{% endraw %}
|
||||
<wa-icon-button name="pencil" label="Rename palette" @click="rename"></wa-icon-button>
|
||||
<wa-icon-button class="delete" name="trash" label="Delete palette" @click="deleteSaved"></wa-icon-button>
|
||||
</h1>
|
||||
<h1 v-if="!saved" class="title">{{ title }}</h1>
|
||||
|
||||
<div class="block-info">
|
||||
<code class="class">.wa-palette-{{ paletteId }}</code>
|
||||
{% include '../_includes/status.njk' %}
|
||||
{% if not isPro %}
|
||||
<wa-badge class="pro" v-if="tweaked">PRO</wa-badge>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if description %}
|
||||
<p class="summary">
|
||||
{{ description | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
|
||||
{% set maxChroma = 0 %}
|
||||
|
||||
<wa-callout size="small" class="tweaked-callout" variant="warning">
|
||||
<wa-icon name="sliders-simple" slot="icon" variant="regular"></wa-icon>
|
||||
This palette has been tweaked.
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-tag v-for="tweakHumanReadable, param in tweaksHumanReadable" removable @wa-remove="reset(param)">{% raw %}{{ tweakHumanReadable }}{% endraw %}</wa-tag>
|
||||
</div>
|
||||
|
||||
<wa-button @click="reset()" appearance="outlined" variant="danger">
|
||||
<span slot="prefix" class="icon-modifier">
|
||||
<wa-icon name="circle-xmark" variant="regular"></wa-icon>
|
||||
</span>
|
||||
Reset
|
||||
</wa-button>
|
||||
<wa-button v-if="!saved" @click="save" variant="success">
|
||||
<span slot="prefix" class="icon-modifier">
|
||||
<wa-icon name="sidebar" variant="regular"></wa-icon>
|
||||
<wa-icon name="circle-plus" class="modifier" style="color: light-dark(var(--wa-color-green-70), var(--wa-color-green-60));"></wa-icon>
|
||||
</span>
|
||||
Save
|
||||
</wa-button>
|
||||
</wa-callout>
|
||||
|
||||
<table class="colors main wa-palette-{{ paletteId }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{# Initialize to last hue before gray #}
|
||||
{%- set hueBefore = hues[hues|length - 2] -%}
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% set coreTint = palettes[paletteId][hue].maxChromaTint %}
|
||||
{%- set coreColor = palettes[paletteId][hue][coreTint] -%}
|
||||
{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%}
|
||||
{% if hue === 'gray' %}
|
||||
<tr data-hue="{{ hue }}" class="color-scale"
|
||||
:class="{tweaking: tweaking.grayChroma, tweaked: tweaked.grayChroma || tweaked.grayColor }">
|
||||
{% else %}
|
||||
<tr data-hue="{{ hue }}" class="color-scale"
|
||||
:class="{tweaking: tweaking.{{ hue }}, tweaked: hueShifts.{{ hue }} }"
|
||||
:style="{ '--hue-shift': hueShifts.{{ hue }} || '' }">
|
||||
{% endif %}
|
||||
<th>
|
||||
{{ hue | capitalize }}
|
||||
</th>
|
||||
<td class="core-column"
|
||||
style="--color: var(--wa-color-{{ hue }})"
|
||||
:style="{
|
||||
'--color-tweaked': colors.{{ hue }}[{{ coreTint }}],
|
||||
'--color-gray-undertone': colors[grayColor][{{coreTint}}],
|
||||
'--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ coreTint }}],
|
||||
}">
|
||||
<wa-dropdown>
|
||||
<div slot="trigger" id="core-{{ hue }}-swatch" data-tint="core" class="color swatch"
|
||||
style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-{{ '05' if palettes[paletteId][hue].maxChromaTint > 60 else '95' }});"
|
||||
>
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-icon name="sliders-simple" class="tweak-icon"></wa-icon>
|
||||
</div>
|
||||
<div class="popup">
|
||||
{% if hue === 'gray' %}
|
||||
<wa-radio-group class="core-color" orientation="horizontal" v-model="grayColor">
|
||||
{% for h in hues -%}
|
||||
{%- if h !== 'gray' -%}
|
||||
<wa-radio-button id="gray-undertone-{{ h }}" value="{{ h }}" label="{{ h | capitalize }}" style="--color: var(--wa-color-{{ h }})"></wa-radio-button>
|
||||
<wa-tooltip for="gray-undertone-{{ h }}" hoist>
|
||||
{{ h | capitalize }}
|
||||
</wa-tooltip>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<div slot="label">
|
||||
Gray undertone
|
||||
</div>
|
||||
</wa-radio-group>
|
||||
<div class="decorated-slider gray-chroma-slider" :style="{'--max': maxGrayChroma}">
|
||||
<wa-slider name="gray-chroma" v-model="grayChroma" ref="grayChromaSlider"
|
||||
value="0" min="0" :max="maxGrayChroma" step="0.01"
|
||||
@input="tweaking.grayChroma = true" @change="tweaking.grayChroma = false">
|
||||
<div slot="label">
|
||||
Gray colorfulness
|
||||
<wa-icon-button @click="grayChroma = originalGrayChroma" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
|
||||
</div>
|
||||
</wa-slider>
|
||||
<div class="label-min">Neutral</div>
|
||||
<div class="label-max" v-content="moreHue[grayColor]">Warmer/Cooler</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{%- set hueAfter = hues[loop.index0 + 1] -%}
|
||||
{%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
|
||||
{%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
|
||||
{%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
|
||||
|
||||
<div class="decorated-slider hue-shift-slider" style="--min: {{ minShift }}; --max: {{ maxShift }};">
|
||||
<wa-slider name="{{ hue }}-shift" v-model="hueShifts.{{ hue }}" value="0"
|
||||
min="{{ minShift }}" max="{{ maxShift }}" step="1"
|
||||
@input="tweaking.hue = tweaking.{{hue}} = true"
|
||||
@change="tweaking.hue = tweaking.{{ hue }} = false">
|
||||
<div slot="label">
|
||||
Tweak {{ hue }} hue
|
||||
<wa-icon-button @click="hueShifts.{{ hue }} = 0" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
|
||||
</div>
|
||||
</wa-slider>
|
||||
<div class="label-min">More {{hueBefore}}</div>
|
||||
<div class="label-max">More {{hueAfter}}</div>
|
||||
</div>
|
||||
{%- set hueBefore = hue -%}
|
||||
{% endif %}
|
||||
<div class="wa-gap-s">
|
||||
<code>--wa-color-{{ hue }}</code>
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</div>`
|
||||
</wa-dropdown>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
{%- set color = palettes[paletteId][hue][tint] -%}
|
||||
<td data-tint="{{ tint }}" style="--color: var(--wa-color-{{ hue }}-{{ tint }})"
|
||||
:style="{
|
||||
'--color-tweaked': colors.{{ hue }}[{{ tint }}],
|
||||
'--color-tweaked-no-gray-chroma': colorsMinusGrayChroma.{{ hue }}[{{ tint }}],
|
||||
}">
|
||||
<div class="color swatch" style="--color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -34,6 +189,26 @@
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
{% set chromaScaleBounds = [
|
||||
(0.08 / maxChroma) | number({maximumFractionDigits: 2}),
|
||||
(0.3 / maxChroma]) | number({maximumFractionDigits: 2}) -%}
|
||||
<div class="decorated-slider chroma-scale-slider wa-palette-{{ paletteId }}"
|
||||
:class="{ tweaked: chromaScale !== 1 }"
|
||||
style="--min: {{ chromaScaleBounds[0] }}; --max: {{ chromaScaleBounds[1] }};">
|
||||
<wa-slider name="chroma-scale" ref="chromaScaleSlider"
|
||||
v-model="chromaScale" value="1" step="0.01"
|
||||
min="{{ chromaScaleBounds[0] }}" max="{{ chromaScaleBounds[1] }}"
|
||||
@input="tweaking.chroma = true"
|
||||
@change="tweaking.chroma = false">
|
||||
<div slot="label">
|
||||
Overall colorfulness
|
||||
<wa-icon-button @click="chromaScale = 1" class="clear-button" name="circle-xmark" library="system" variant="regular" label="Reset"></wa-icon-button>
|
||||
</div>
|
||||
</wa-slider>
|
||||
<div class="label-min">More muted</div>
|
||||
<div class="label-max">More vibrant</div>
|
||||
</div>
|
||||
|
||||
<h2>Used By</h2>
|
||||
|
||||
<section class="index-grid">
|
||||
@@ -58,6 +233,7 @@ A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for larg
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 40 %}
|
||||
{% set minContrast = 3 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
@@ -77,6 +253,7 @@ A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for no
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 50 %}
|
||||
{% set minContrast = 4.5 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
@@ -95,6 +272,7 @@ A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 60 %}
|
||||
{% set minContrast = 7 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
@@ -107,13 +285,34 @@ This also goes for a difference of `65`:
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
## How to use this palette
|
||||
## How to use this palette { #usage }
|
||||
|
||||
If you are using a Web Awesome theme that uses this palette, it will already be included.
|
||||
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
<wa-tab-group class="import-stylesheet-code">
|
||||
<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:
|
||||
```html { v-content:html="code.html.highlighted" }
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Add the following code at the top of your CSS file:
|
||||
```css { v-content:html="code.css.highlighted" }
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
|
||||
{% endmarkdown %}
|
||||
</div></div> {# end palette app #}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
5
docs/_layouts/patterns.njk
Normal file
5
docs/_layouts/patterns.njk
Normal file
@@ -0,0 +1,5 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% block head %}
|
||||
<link href="{{ page.url }}../patterns.css" rel="stylesheet">
|
||||
{% endblock %}
|
||||
@@ -3,37 +3,143 @@
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
{% set themeId = page.fileSlug %}
|
||||
{% if themeId == 'remixed' -%}
|
||||
{% set themeId = 'default' %}
|
||||
{% endif -%}
|
||||
|
||||
{% block head %}
|
||||
<script>
|
||||
globalThis.wa_data ??= {};
|
||||
wa_data.baseTheme = "{{ page.fileSlug }}";
|
||||
wa_data.themes = {
|
||||
{% for theme in collections.theme -%}
|
||||
"{{ theme.fileSlug }}": {
|
||||
"title": "{{ theme.data.title }}",
|
||||
"palette": "{{ theme.data.palette }}",
|
||||
"brand": "{{ theme.data.brand }}"
|
||||
},
|
||||
{% endfor %}
|
||||
};
|
||||
wa_data.palettes = {
|
||||
{% for palette in collections.palette -%}
|
||||
"{{ palette.fileSlug }}": {
|
||||
"title": "{{ palette.data.title }}",
|
||||
},
|
||||
{% endfor %}
|
||||
};
|
||||
</script>
|
||||
<link href="{{ page.url }}../remix.css" rel="stylesheet">
|
||||
<script src="{{ page.url }}../remix.js" type="module"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
<iframe src='/docs/themes/{{ themeId }}/demo.html' id="demo"></iframe>
|
||||
|
||||
{% if palette -%}
|
||||
<h2>Default Color Palette</h2>
|
||||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||||
|
||||
<wa-details id="mix_and_match" class="wa-gap-m" >
|
||||
<h4 slot="summary" data-no-anchor data-no-outline id="remix">
|
||||
<wa-icon name="arrows-rotate"></wa-icon>
|
||||
Remix this theme
|
||||
<wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
|
||||
<wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
|
||||
</h4>
|
||||
|
||||
<wa-select name="colors" label="Colors from…" value="" clearable>
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% set currentTheme = theme.fileSlug == page.fileSlug %}
|
||||
<wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theme-color.njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ theme.data.title }}
|
||||
{% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" clearable>
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
{% set defaultPalette = palette %}
|
||||
{% for palette in collections.palette | sort %}
|
||||
{% set currentPalette = palette.fileSlug == defaultPalette %}
|
||||
<wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ palette.data.title }}
|
||||
{% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
{% set palette = defaultPalette %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="brand" label="Brand color" value="" clearable>
|
||||
<div class="selected-swatch" slot="prefix"></div>
|
||||
{% for hue in hues %}
|
||||
{% set currentBrand = hue == brand %}
|
||||
<wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
|
||||
{{ hue | capitalize }}
|
||||
{% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" clearable>
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% set currentTheme = theme.fileSlug == page.fileSlug %}
|
||||
<wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theme-typography.njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ theme.data.title }}
|
||||
{% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
</wa-details>
|
||||
|
||||
<h2>Color</h2>
|
||||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
<div class="index-grid">
|
||||
{% include 'page-card.njk' %}
|
||||
</div>
|
||||
{% set page = themePage %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="index-grid">
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
{% set pageSubtitle = "Default color palette" %}
|
||||
{% include 'page-card.njk' %}
|
||||
{% set page = themePage %}
|
||||
|
||||
<wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
|
||||
<div slot="header"></div>
|
||||
<div class="page-name">{{ brand | capitalize }}</div>
|
||||
<div class="wa-caption-s">Default brand color</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% markdown %}
|
||||
{%- if page.fileSlug != 'remixed' %}
|
||||
## How to use this theme
|
||||
|
||||
<h2 id="usage">How to use this theme</h2>
|
||||
|
||||
{% markdown %}
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + themeId + '.css' %}
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
{% endif %}
|
||||
|
||||
## Dark mode
|
||||
|
||||
@@ -75,6 +181,7 @@ 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
|
||||
@@ -83,5 +190,18 @@ 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 %}
|
||||
|
||||
19
docs/_layouts/utility.njk
Normal file
19
docs/_layouts/utility.njk
Normal file
@@ -0,0 +1,19 @@
|
||||
{% 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 %}
|
||||
@@ -37,7 +37,8 @@ export function anchorHeadingsPlugin(options = {}) {
|
||||
}
|
||||
|
||||
// Look for headings
|
||||
container.querySelectorAll(options.headingSelector).forEach(heading => {
|
||||
let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
|
||||
container.querySelectorAll(selector).forEach(heading => {
|
||||
const hasAnchor = heading.querySelector('a');
|
||||
const existingId = heading.getAttribute('id');
|
||||
const clone = parse(heading.outerHTML);
|
||||
|
||||
@@ -3,30 +3,39 @@ import { parse } from 'node-html-parser';
|
||||
/**
|
||||
* Eleventy plugin to add copy buttons to code blocks.
|
||||
*/
|
||||
export function copyCodePlugin(options = {}) {
|
||||
export function copyCodePlugin(eleventyConfig, options = {}) {
|
||||
options = {
|
||||
container: 'body',
|
||||
...options,
|
||||
};
|
||||
|
||||
return function (eleventyConfig) {
|
||||
eleventyConfig.addTransform('copy-code', content => {
|
||||
const doc = parse(content, { blockTextElements: { code: true } });
|
||||
const container = doc.querySelector(options.container);
|
||||
let codeCount = 0;
|
||||
eleventyConfig.addTransform('copy-code', content => {
|
||||
const doc = parse(content, { blockTextElements: { code: true } });
|
||||
const container = doc.querySelector(options.container);
|
||||
|
||||
if (!container) {
|
||||
return content;
|
||||
if (!container) {
|
||||
return content;
|
||||
}
|
||||
|
||||
// Look for code blocks
|
||||
container.querySelectorAll('pre > code').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
|
||||
let codeId = code.getAttribute('id') || `${preId}-inner`;
|
||||
|
||||
if (!code.getAttribute('id')) {
|
||||
code.setAttribute('id', codeId);
|
||||
}
|
||||
if (!pre.getAttribute('id')) {
|
||||
pre.setAttribute('id', preId);
|
||||
}
|
||||
|
||||
// Look for code blocks
|
||||
container.querySelectorAll('pre > code').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
|
||||
// Add a copy button (we set the copy data at runtime to reduce page bloat)
|
||||
pre.innerHTML = `<wa-copy-button class="copy-button" hoist></wa-copy-button>` + pre.innerHTML;
|
||||
});
|
||||
|
||||
return doc.toString();
|
||||
// Add a copy button
|
||||
pre.innerHTML += `<wa-icon-button href="#${preId}" class="block-link-icon" name="link"></wa-icon-button>
|
||||
<wa-copy-button from="${codeId}" class="copy-button" hoist></wa-copy-button>`;
|
||||
});
|
||||
};
|
||||
|
||||
return doc.toString();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
function setCopyValue() {
|
||||
document.querySelectorAll('.copy-button').forEach(copyButton => {
|
||||
const pre = copyButton.closest('pre');
|
||||
const code = pre?.querySelector('code');
|
||||
|
||||
if (code) {
|
||||
copyButton.value = code.textContent;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Set data for all copy buttons when the page loads
|
||||
setCopyValue();
|
||||
|
||||
document.addEventListener('turbo:load', setCopyValue);
|
||||
8
docs/assets/scripts/prism-downloaded.js
Normal file
8
docs/assets/scripts/prism-downloaded.js
Normal file
File diff suppressed because one or more lines are too long
8
docs/assets/scripts/prism.js
Normal file
8
docs/assets/scripts/prism.js
Normal file
@@ -0,0 +1,8 @@
|
||||
globalThis.Prism = globalThis.Prism || {};
|
||||
globalThis.Prism.manual = true;
|
||||
|
||||
await import('./prism-downloaded.js');
|
||||
|
||||
Prism.plugins.customClass.prefix('code-');
|
||||
|
||||
export default Prism;
|
||||
254
docs/assets/scripts/sidebar-tweaks.js
Normal file
254
docs/assets/scripts/sidebar-tweaks.js
Normal file
@@ -0,0 +1,254 @@
|
||||
const sidebar = (globalThis.sidebar = {});
|
||||
|
||||
sidebar.palettes = {
|
||||
render() {
|
||||
if (this.saved.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let palette of this.saved) {
|
||||
sidebar.palette.render(palette);
|
||||
}
|
||||
|
||||
sidebar.updateCurrent();
|
||||
},
|
||||
|
||||
updateSaved() {
|
||||
this.saved = localStorage.savedPalettes ? JSON.parse(localStorage.savedPalettes) : [];
|
||||
},
|
||||
|
||||
save(saved = this.saved) {
|
||||
this.saved = saved ?? [];
|
||||
|
||||
if (saved.length > 0) {
|
||||
localStorage.savedPalettes = JSON.stringify(saved);
|
||||
} else {
|
||||
delete localStorage.savedPalettes;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
sidebar.palettes.updateSaved();
|
||||
addEventListener('storage', event => sidebar.palettes.updateSaved());
|
||||
|
||||
sidebar.palette = {
|
||||
getUid() {
|
||||
let savedPalettes = sidebar.palettes.saved;
|
||||
let uids = new Set(savedPalettes.map(p => p.uid));
|
||||
|
||||
if (savedPalettes.length === 0) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
// Find first available number
|
||||
for (let i = 1; i <= savedPalettes.length + 1; i++) {
|
||||
if (!uids.has(i)) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
equals(p1, p2) {
|
||||
if (!p1 || !p2) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return p1.id === p2.id && p1.uid === p2.uid;
|
||||
},
|
||||
|
||||
delete(palette) {
|
||||
let savedPalettes = sidebar.palettes.saved;
|
||||
let count = savedPalettes.length;
|
||||
if (count === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO improve UX of this
|
||||
if (!confirm(`Are you sure you want to delete palette “${palette.title}”?`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
savedPalettes = savedPalettes.filter(p => !sidebar.palette.equals(palette, p));
|
||||
|
||||
if (savedPalettes.length === count) {
|
||||
// Nothing was removed
|
||||
return;
|
||||
}
|
||||
|
||||
// Update UI
|
||||
let pathname = `/docs/palettes/${palette.id}/`;
|
||||
let url = pathname + palette.search;
|
||||
let uls = new Set();
|
||||
|
||||
for (let a of document.querySelectorAll(`#sidebar a[href="${url}"]`)) {
|
||||
let li = a.closest('li');
|
||||
let ul = li.closest('ul');
|
||||
uls.add(ul);
|
||||
li.remove();
|
||||
}
|
||||
|
||||
// Remove empty lists
|
||||
for (let ul of uls) {
|
||||
if (!ul.children.length) {
|
||||
ul.remove();
|
||||
}
|
||||
}
|
||||
|
||||
sidebar.updateCurrent();
|
||||
|
||||
sidebar.palettes.save(savedPalettes);
|
||||
|
||||
if (sidebar.palette.equals(globalThis.paletteApp?.saved, palette)) {
|
||||
paletteApp.postDelete();
|
||||
}
|
||||
},
|
||||
|
||||
getSaved(palette, savedPalettes = sidebar.palettes.saved) {
|
||||
return savedPalettes.find(p => sidebar.palette.equals(p, palette));
|
||||
},
|
||||
|
||||
render(palette) {
|
||||
// Find existing <a>
|
||||
let { title, id, search, uid } = palette;
|
||||
|
||||
for (let a of document.querySelectorAll(`#sidebar a[href^="/docs/palettes/${id}/"][data-uid="${uid}"]`)) {
|
||||
// Palette already in sidebar, just update it
|
||||
a.textContent = palette.title;
|
||||
a.href = `/docs/palettes/${id}/${search}`;
|
||||
return;
|
||||
}
|
||||
|
||||
let pathname = `/docs/palettes/${id}/`;
|
||||
let url = pathname + search;
|
||||
let parentA = document.querySelector(`a[href="${pathname}"]`);
|
||||
let parentLi = parentA?.closest('li');
|
||||
let a;
|
||||
|
||||
if (parentLi) {
|
||||
a = Object.assign(document.createElement('a'), { href: url, textContent: title });
|
||||
a.dataset.uid = uid;
|
||||
let badges = [...parentLi.querySelectorAll('wa-badge')].map(badge => badge.cloneNode(true));
|
||||
let ul = parentLi.querySelector('ul') ?? parentLi.appendChild(document.createElement('ul'));
|
||||
let li = document.createElement('li');
|
||||
let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
|
||||
name: 'trash',
|
||||
label: 'Delete',
|
||||
className: 'delete',
|
||||
});
|
||||
|
||||
deleteButton.addEventListener('click', () => {
|
||||
let palette = { id, uid, title: a.textContent, search: a.search };
|
||||
sidebar.palette.delete(palette);
|
||||
});
|
||||
|
||||
li.append(a, ' ', ...badges, deleteButton);
|
||||
ul.appendChild(li);
|
||||
}
|
||||
},
|
||||
|
||||
save(palette, saved) {
|
||||
let savedPalettes = sidebar.palettes.saved;
|
||||
let existing = this.getSaved(saved ?? palette, savedPalettes);
|
||||
let oldValues;
|
||||
|
||||
if (existing) {
|
||||
// Rename
|
||||
oldValues = { ...existing };
|
||||
Object.assign(existing, palette);
|
||||
} else {
|
||||
savedPalettes.push(palette);
|
||||
}
|
||||
|
||||
this.render(palette, oldValues);
|
||||
sidebar.updateCurrent();
|
||||
|
||||
sidebar.palettes.save(savedPalettes);
|
||||
},
|
||||
};
|
||||
|
||||
sidebar.updateCurrent = function () {
|
||||
// Find the sidebar link with the longest shared prefix with the current URL
|
||||
let pathParts = location.pathname.split('/').filter(Boolean);
|
||||
let prefixes = [];
|
||||
|
||||
if (pathParts.length === 1) {
|
||||
// If at /docs/ we just use that, otherwise we want at least two parts (/docs/xxx/)
|
||||
prefixes.push('/' + pathParts[0] + '/');
|
||||
} else {
|
||||
for (let i = 2; i <= pathParts.length; i++) {
|
||||
prefixes.push('/' + pathParts.slice(0, i).join('/') + '/');
|
||||
}
|
||||
}
|
||||
|
||||
// Last prefix includes the search too (if any)
|
||||
if (location.search) {
|
||||
let params = new URLSearchParams(location.search);
|
||||
params.sort();
|
||||
prefixes.push(prefixes.at(-1) + location.search);
|
||||
}
|
||||
|
||||
// We want to start from the longest prefix
|
||||
prefixes.reverse();
|
||||
let candidates;
|
||||
let matchingPrefix;
|
||||
|
||||
for (let prefix of prefixes) {
|
||||
candidates = document.querySelectorAll(`#sidebar a[href^="${prefix}"]`);
|
||||
|
||||
if (candidates.length > 0) {
|
||||
matchingPrefix = prefix;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!matchingPrefix) {
|
||||
// Abort mission
|
||||
return;
|
||||
}
|
||||
|
||||
if (matchingPrefix === pathParts.at(-1)) {
|
||||
// Full path matches, check search
|
||||
if (location.search) {
|
||||
candidates = [...candidates];
|
||||
|
||||
let searchParams = new URLSearchParams(location.search);
|
||||
|
||||
if (searchParams.has('uid')) {
|
||||
// Only consider candidates with the same uid
|
||||
candidates = candidates.filter(a => {
|
||||
let params = new URLSearchParams(a.search);
|
||||
return params.get('uid') === searchParams.get('uid');
|
||||
});
|
||||
} else {
|
||||
// Sort candidates based on how many params they have in common, in descending order
|
||||
candidates = candidates.sort((a, b) => {
|
||||
return countSharedSearchParams(searchParams, b.search) - countSharedSearchParams(searchParams, a.search);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (candidates.length > 0) {
|
||||
for (let current of document.querySelectorAll('#sidebar a.current')) {
|
||||
current.classList.remove('current');
|
||||
}
|
||||
|
||||
candidates[0].classList.add('current');
|
||||
}
|
||||
};
|
||||
|
||||
sidebar.render = function () {
|
||||
this.palettes.render();
|
||||
};
|
||||
|
||||
sidebar.render();
|
||||
window.addEventListener('turbo:render', () => sidebar.render());
|
||||
|
||||
function countSharedSearchParams(searchParams, search) {
|
||||
if (!search || search === '?') {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let params = new URLSearchParams(search);
|
||||
return [...searchParams.keys()].filter(k => params.get(k) === searchParams.get(k)).length;
|
||||
}
|
||||
6
docs/assets/scripts/tweak.js
Normal file
6
docs/assets/scripts/tweak.js
Normal file
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Get import code for remixed themes and tweaked palettes.
|
||||
*/
|
||||
export { getThemeCode } from './tweak/code.js';
|
||||
export { cdnUrl, hueRanges, hues, selectors, tints, urls } from './tweak/data.js';
|
||||
export { default as Permalink } from './tweak/permalink.js';
|
||||
54
docs/assets/scripts/tweak/code.js
Normal file
54
docs/assets/scripts/tweak/code.js
Normal file
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Get import code for remixed themes and tweaked palettes.
|
||||
*/
|
||||
import { urls } from './data.js';
|
||||
|
||||
export function cssImport(url, options = {}) {
|
||||
let { language = 'html', cdnUrl = '/dist/', attributes } = options;
|
||||
url = cdnUrl + url;
|
||||
|
||||
if (language === 'css') {
|
||||
return `@import url('${url}');`;
|
||||
} else {
|
||||
attributes = attributes ? ` ${attributes}` : '';
|
||||
return `<link rel="stylesheet" href="${url}"${attributes} />`;
|
||||
}
|
||||
}
|
||||
|
||||
export function cssLiteral(value, options = {}) {
|
||||
let { language = 'html' } = options;
|
||||
|
||||
if (language === 'css') {
|
||||
return value;
|
||||
} else {
|
||||
return `<style>\n${value}\n</style>`;
|
||||
}
|
||||
}
|
||||
|
||||
// Params in correct order
|
||||
export const themeParams = ['colors', 'palette', 'brand', 'typography'];
|
||||
|
||||
export function getThemeCode(base, params, options) {
|
||||
let ret = [];
|
||||
|
||||
if (base) {
|
||||
ret.push(urls.theme(base));
|
||||
}
|
||||
|
||||
for (let aspect of themeParams) {
|
||||
let value = params[aspect];
|
||||
|
||||
if (value) {
|
||||
ret.push(urls[aspect](value));
|
||||
}
|
||||
}
|
||||
|
||||
return ret.map(url => cssImport(url, options)).join('\n');
|
||||
}
|
||||
|
||||
export function cssRule(selector, declarations, { indent = ' ' } = {}) {
|
||||
selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
|
||||
declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
|
||||
declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
|
||||
return `${selector} {\n${declarations.trimEnd()}\n}`;
|
||||
}
|
||||
73
docs/assets/scripts/tweak/data.js
Normal file
73
docs/assets/scripts/tweak/data.js
Normal file
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Data related to theme remixing and palette tweaking
|
||||
* Must work in both browser and Node.js
|
||||
*/
|
||||
export const cdnUrl = globalThis.document ? document.documentElement.dataset.cdnUrl : '/dist/';
|
||||
|
||||
export const urls = {
|
||||
theme: id => `styles/themes/${id}.css`,
|
||||
colors: id => `styles/themes/${id}/color.css`,
|
||||
palette: id => `styles/color/${id}.css`,
|
||||
brand: id => `styles/brand/${id}.css`,
|
||||
typography: id => `styles/themes/${id}/typography.css`,
|
||||
};
|
||||
|
||||
export const selectors = {
|
||||
palette: id =>
|
||||
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${id}`].join(',\n'),
|
||||
};
|
||||
|
||||
export const hueRanges = {
|
||||
red: { min: 5, max: 35 }, // 30
|
||||
orange: { min: 35, max: 60 }, // 25
|
||||
yellow: { min: 60, max: 112 }, // 45
|
||||
green: { min: 112, max: 170 }, // 55
|
||||
cyan: { min: 170, max: 220 }, // 50
|
||||
blue: { min: 220, max: 265 }, // 45
|
||||
indigo: { min: 265, max: 290 }, // 25
|
||||
purple: { min: 290, max: 320 }, // 30
|
||||
pink: { min: 320, max: 365 }, // 45
|
||||
};
|
||||
|
||||
export const moreHue = {
|
||||
red: 'Redder',
|
||||
orange: 'More orange', // https://www.reddit.com/r/grammar/comments/u9n0uo/is_it_oranger_or_more_orange/
|
||||
yellow: 'Yellower',
|
||||
green: 'Greener',
|
||||
cyan: 'More cyan',
|
||||
blue: 'Bluer',
|
||||
indigo: 'More indigo',
|
||||
pink: 'Pinker',
|
||||
};
|
||||
|
||||
/**
|
||||
* Max gray chroma (% of chroma of undertone) per hue
|
||||
*/
|
||||
export const maxGrayChroma = {
|
||||
red: 0.2,
|
||||
orange: 0.2,
|
||||
yellow: 0.25,
|
||||
green: 0.25,
|
||||
cyan: 0.3,
|
||||
blue: 0.35,
|
||||
indigo: 0.35,
|
||||
purple: 0.3,
|
||||
pink: 0.25,
|
||||
};
|
||||
|
||||
export const docsURLs = {
|
||||
colors: '/docs/themes/',
|
||||
palette: '/docs/palettes/',
|
||||
typography: '/docs/themes/',
|
||||
};
|
||||
|
||||
export const icons = {
|
||||
colors: 'palette',
|
||||
palette: 'swatchbook',
|
||||
brand: 'droplet',
|
||||
typography: 'font-case',
|
||||
};
|
||||
|
||||
export const hues = Object.keys(hueRanges);
|
||||
|
||||
export const tints = ['05', '10', '20', '30', '40', '50', '60', '70', '80', '90', '95'];
|
||||
81
docs/assets/scripts/tweak/permalink.js
Normal file
81
docs/assets/scripts/tweak/permalink.js
Normal file
@@ -0,0 +1,81 @@
|
||||
const IDENTITY = x => x;
|
||||
|
||||
export default class Permalink extends URLSearchParams {
|
||||
/** Params changed since last URL I/O */
|
||||
changed = false;
|
||||
|
||||
constructor(params) {
|
||||
super(location.search);
|
||||
this.params = params;
|
||||
}
|
||||
|
||||
toJSON() {
|
||||
return Object.fromEntries(this.entries());
|
||||
}
|
||||
|
||||
#mappings = new WeakMap();
|
||||
|
||||
mapObject(obj, mapping = {}) {
|
||||
this.#mappings.set(obj, mapping);
|
||||
}
|
||||
|
||||
readFrom(obj) {
|
||||
let mapping = this.#mappings.get(obj) ?? {};
|
||||
let { keyFrom = IDENTITY, valueFrom = IDENTITY } = mapping;
|
||||
|
||||
for (let key in obj) {
|
||||
let value = obj[key];
|
||||
let mappedValue = valueFrom(value);
|
||||
let mappedKey = keyFrom(key);
|
||||
this.set(mappedKey, mappedValue);
|
||||
}
|
||||
}
|
||||
|
||||
writeTo(obj) {
|
||||
let mapping = this.#mappings.get(obj) ?? {};
|
||||
let { keyTo = IDENTITY, valueTo = IDENTITY, canExtend = false } = mapping;
|
||||
|
||||
for (let [key, value] of this) {
|
||||
let mappedKey = keyTo(key);
|
||||
let mappedValue = valueTo(value);
|
||||
|
||||
if (canExtend || mappedKey in obj) {
|
||||
obj[mappedKey] = mappedValue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
set(key, value, defaultValue) {
|
||||
let oldValue = this.get(key);
|
||||
|
||||
if (!value || value == defaultValue) {
|
||||
super.delete(key);
|
||||
|
||||
if (oldValue) {
|
||||
this.changed = true;
|
||||
}
|
||||
} else {
|
||||
super.set(key, value);
|
||||
|
||||
if (String(value) !== String(oldValue)) {
|
||||
this.changed = true;
|
||||
}
|
||||
}
|
||||
|
||||
this.sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update page URL if it has changed since last time
|
||||
*/
|
||||
updateLocation() {
|
||||
if (this.changed) {
|
||||
// If there’s already a search, replace it.
|
||||
// We don’t want to clog the user’s history while they iterate
|
||||
let search = this.toString();
|
||||
let historyAction = location.search && search ? 'replaceState' : 'pushState';
|
||||
history[historyAction](null, '', `?${search}`);
|
||||
this.changed = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
docs/assets/scripts/tweak/util.js
Normal file
36
docs/assets/scripts/tweak/util.js
Normal file
@@ -0,0 +1,36 @@
|
||||
export function normalizeAngles(angles) {
|
||||
// First, normalize
|
||||
angles = angles.map(h => ((h % 360) + 360) % 360);
|
||||
|
||||
// Remove top and bottom 25% and find average
|
||||
let averageHue =
|
||||
angles
|
||||
.toSorted((a, b) => a - b)
|
||||
.slice(angles.length / 4, -angles.length / 4)
|
||||
.reduce((a, b) => a + b, 0) / angles.length;
|
||||
|
||||
for (let i = 0; i < angles.length; i++) {
|
||||
let h = angles[i];
|
||||
let prevHue = angles[i - 1];
|
||||
let delta = h - prevHue;
|
||||
|
||||
if (Math.abs(delta) > 180) {
|
||||
let equivalent = [h + 360, h - 360];
|
||||
// Offset hue to minimize difference in the direction that brings it closer to the average
|
||||
let delta = h - averageHue;
|
||||
|
||||
if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
|
||||
angles[i] = equivalent[0];
|
||||
} else {
|
||||
angles[i] = equivalent[1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return angles;
|
||||
}
|
||||
|
||||
export function subtractAngles(θ1, θ2) {
|
||||
let [a, b] = normalizeAngles([θ1, θ2]);
|
||||
return a - b;
|
||||
}
|
||||
@@ -27,3 +27,19 @@ wa-copy-button.copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.block-link-icon {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: calc(100% + var(--wa-space-s));
|
||||
|
||||
transition: var(--wa-transition-slow);
|
||||
|
||||
&:not(:hover, :focus) {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
:not(:hover, :focus-within) > & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -156,7 +156,7 @@ wa-page > header {
|
||||
}
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro::part(base) {
|
||||
wa-badge.pro {
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
@@ -188,6 +188,29 @@ wa-badge.pro::part(base) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-icon-button.delete {
|
||||
vertical-align: -0.2em;
|
||||
margin-inline-start: var(--wa-space-xs);
|
||||
|
||||
&:not(li:hover > *, :focus) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-icon-button.delete {
|
||||
&:hover {
|
||||
color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
&::part(base):hover {
|
||||
background: var(--wa-color-danger-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(:hover, :focus) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-close-button {
|
||||
@@ -232,16 +255,32 @@ wa-page > main {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
h1.title wa-badge {
|
||||
vertical-align: middle;
|
||||
h1.title {
|
||||
wa-icon-button {
|
||||
font-size: var(--wa-font-size-l);
|
||||
color: var(--wa-color-text-quiet);
|
||||
|
||||
&::part(base) {
|
||||
&:not(:hover, :focus) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
vertical-align: middle;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.block-info {
|
||||
display: flex;
|
||||
gap: var(--wa-space-xs);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
|
||||
code {
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
}
|
||||
}
|
||||
|
||||
/* Current link */
|
||||
@@ -360,7 +399,7 @@ wa-page > main:has(> .index-grid) {
|
||||
}
|
||||
|
||||
&::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -400,9 +439,18 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
&.color {
|
||||
border-color: transparent;
|
||||
transition: background var(--wa-transition-slow);
|
||||
background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
|
||||
background-position: var(--color-2-position, bottom);
|
||||
background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
|
||||
|
||||
&.contrast-fail {
|
||||
outline: 1px dashed var(--wa-color-red);
|
||||
outline-offset: calc(-1 * var(--wa-space-2xs));
|
||||
}
|
||||
}
|
||||
|
||||
wa-copy-button {
|
||||
> wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -437,6 +485,7 @@ table.colors {
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
border: none;
|
||||
@@ -456,6 +505,59 @@ table.colors {
|
||||
padding-block: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
|
||||
.core-column {
|
||||
padding-inline-end: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.value-up,
|
||||
.value-down {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: ' ' var(--icon);
|
||||
position: absolute;
|
||||
margin-inline-start: 3em;
|
||||
scale: 1 0.6;
|
||||
color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
|
||||
font-size: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.value-down {
|
||||
--icon: '▼';
|
||||
--icon-color: var(--wa-color-danger-fill-quiet);
|
||||
|
||||
&::after {
|
||||
margin-block-end: -0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.value-up {
|
||||
--icon: '▲';
|
||||
--icon-color: var(--wa-color-success-fill-quiet);
|
||||
}
|
||||
|
||||
.icon-modifier {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
||||
.modifier {
|
||||
position: absolute;
|
||||
bottom: -0.1em;
|
||||
right: -0.3em;
|
||||
font-size: 60%;
|
||||
|
||||
&::part(svg) {
|
||||
stroke: var(--background-color, var(--wa-color-surface-default));
|
||||
stroke-width: 100px;
|
||||
paint-order: stroke;
|
||||
overflow: visible;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
|
||||
34
docs/assets/styles/theme-icons.css
Normal file
34
docs/assets/styles/theme-icons.css
Normal file
@@ -0,0 +1,34 @@
|
||||
.theme-color-icon {
|
||||
display: grid;
|
||||
gap: var(--wa-space-xs);
|
||||
grid-template-columns: repeat(4, auto);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--background-color);
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--border-color);
|
||||
padding: var(--wa-space-2xs) var(--wa-space-xs);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
|
||||
&.plain {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-typography-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--wa-space-xs);
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -17,32 +17,39 @@ icon: button-group
|
||||
|
||||
### Button Sizes
|
||||
|
||||
All button sizes are supported, but avoid mixing sizes within the same button group.
|
||||
Unless otherwise specified,
|
||||
the size of [buttons](/docs/components/button) will be determined by the Button Group's `size` attribute.
|
||||
|
||||
```html {.example}
|
||||
<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 size="small" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<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 size="medium" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<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 size="large" label="Alignment">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>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.
|
||||
@@ -70,21 +77,21 @@ Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button's `variant` attribute.
|
||||
Theme buttons are supported through the button group's `variant` attribute.
|
||||
|
||||
```html {.example}
|
||||
<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 label="Alignment" variant="brand">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<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 label="Alignment" variant="success">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
@@ -97,18 +104,28 @@ Theme buttons are supported through the button's `variant` attribute.
|
||||
|
||||
<br /><br />
|
||||
|
||||
<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 label="Alignment" variant="warning">
|
||||
<wa-button>Left</wa-button>
|
||||
<wa-button>Center</wa-button>
|
||||
<wa-button>Right</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<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 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>
|
||||
```
|
||||
|
||||
|
||||
@@ -30,33 +30,43 @@ Use the `appearance` attribute to change the button's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-gap-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
|
||||
<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-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
|
||||
<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-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
|
||||
<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-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
|
||||
<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-m">
|
||||
<div class="wa-gap-2xs">
|
||||
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
|
||||
<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>
|
||||
|
||||
@@ -19,13 +19,13 @@ icon: card
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-rating label="Rating"></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
@@ -143,3 +143,42 @@ If using SSR, you need to also use the `with-image` 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 with-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 with-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 with-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>
|
||||
|
||||
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
|
||||
const carousel = document.querySelector('wa-carousel.aspect-ratio');
|
||||
const aspectRatio = document.querySelector('wa-select[name="aspect"]');
|
||||
|
||||
aspectRatio.addEventlistener('change', () => {
|
||||
aspectRatio.addEventListener('change', () => {
|
||||
carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity on change
|
||||
checkbox.addEventlistener('change', () => {
|
||||
checkbox.addEventListener('change', () => {
|
||||
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
|
||||
});
|
||||
|
||||
|
||||
@@ -66,9 +66,11 @@ 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}
|
||||
<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 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>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
@@ -9,6 +9,10 @@ icon: copy-button
|
||||
<wa-copy-button value="Web Awesome rocks!"></wa-copy-button>
|
||||
```
|
||||
|
||||
:::info
|
||||
Copy buttons use the browser's [`clipboard.writeText()`](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) method, which requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) (HTTPS) in most browsers.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Custom Labels
|
||||
|
||||
@@ -52,8 +52,8 @@ wa-page {
|
||||
}
|
||||
|
||||
&[slot^='navigation'] {
|
||||
background: var(--wa-color-violet-80);
|
||||
color: var(--wa-color-violet-20);
|
||||
background: var(--wa-color-purple-80);
|
||||
color: var(--wa-color-purple-20);
|
||||
}
|
||||
|
||||
strong {
|
||||
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" 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>
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" 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>
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" 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" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" 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>
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" 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>
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" 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>
|
||||
@@ -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" name="a" value="1">
|
||||
<wa-radio-group size="small" label="Select an option" orientation="horizontal" 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" name="a" value="1">
|
||||
<wa-radio-group size="medium" label="Select an option" orientation="horizontal" 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" name="a" value="1">
|
||||
<wa-radio-group size="large" label="Select an option" orientation="horizontal" 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" name="a" value="1">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" 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" name="a" value="neutral">
|
||||
<wa-radio-group label="Select an option" orientation="horizontal" name="a" value="neutral">
|
||||
<wa-radio-button value="angry">
|
||||
<wa-icon name="face-angry" variant="solid" label="Angry"></wa-icon>
|
||||
</wa-radio-button>
|
||||
|
||||
@@ -32,7 +32,28 @@ 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="Select an option" hint="Select an option that makes you proud." name="a" value="1">
|
||||
<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-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>
|
||||
@@ -51,28 +72,39 @@ 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-buttons) will be determined by the Radio Group's `size` attribute.
|
||||
The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute.
|
||||
|
||||
```html preview
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" onchange="this.size = this.value">
|
||||
<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. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
|
||||
[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute,
|
||||
which will override the inherited size when used.
|
||||
:::
|
||||
|
||||
### Validation
|
||||
@@ -127,7 +159,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><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<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>
|
||||
```
|
||||
@@ -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><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<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>
|
||||
```
|
||||
@@ -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><br>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -53,24 +53,36 @@ 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><br>
|
||||
<wa-radio value="2">Small 2</wa-radio><br>
|
||||
<wa-radio value="1">Small 1</wa-radio>
|
||||
<wa-radio value="2">Small 2</wa-radio>
|
||||
<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><br>
|
||||
<wa-radio value="2">Medium 2</wa-radio><br>
|
||||
<wa-radio value="1">Medium 1</wa-radio>
|
||||
<wa-radio value="2">Medium 2</wa-radio>
|
||||
<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><br>
|
||||
<wa-radio value="2">Large 2</wa-radio><br>
|
||||
<wa-radio value="1">Large 1</wa-radio>
|
||||
<wa-radio value="2">Large 2</wa-radio>
|
||||
<wa-radio value="3">Large 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Hint
|
||||
|
||||
Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
|
||||
<wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
|
||||
<wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
@@ -35,12 +35,20 @@ Use the `precision` attribute to let users select fractional ratings.
|
||||
<wa-rating label="Rating" precision="0.5" value="2.5"></wa-rating>
|
||||
```
|
||||
|
||||
### Symbol Sizes
|
||||
### Sizing
|
||||
|
||||
Set the `--symbol-size` custom property to adjust the size.
|
||||
Use the `size` attribute to adjust the size of the rating.
|
||||
|
||||
```html {.example}
|
||||
<wa-rating label="Rating" style="--symbol-size: 2rem;"></wa-rating>
|
||||
<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>
|
||||
```
|
||||
|
||||
### Readonly
|
||||
|
||||
@@ -130,6 +130,15 @@ Note that multi-select options may wrap, causing the control to expand verticall
|
||||
|
||||
Use the `value` attribute to set the initial selection.
|
||||
|
||||
```html {.example}
|
||||
<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>
|
||||
```
|
||||
|
||||
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
|
||||
|
||||
```html {.example}
|
||||
@@ -294,7 +303,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
|
||||
return `
|
||||
<wa-tag removable>
|
||||
<wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
|
||||
${option.getTextLabel()}
|
||||
${option.label}
|
||||
</wa-tag>
|
||||
`;
|
||||
};
|
||||
|
||||
@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
|
||||
const splitPanel = container.querySelector('wa-split-panel');
|
||||
const select = container.querySelector('wa-select');
|
||||
|
||||
select.addEventlistener('change', () => (splitPanel.primary = select.value));
|
||||
select.addEventListener('change', () => (splitPanel.primary = select.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -7,7 +7,11 @@ native: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea></wa-textarea>
|
||||
<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>
|
||||
```
|
||||
|
||||
:::info
|
||||
|
||||
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
|
||||
const selectionMode = document.querySelector('#selection-mode');
|
||||
const tree = document.querySelector('.tree-selectable');
|
||||
|
||||
selectionMode.addEventlistener('change', () => {
|
||||
selectionMode.addEventListener('change', () => {
|
||||
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
|
||||
tree.selection = selectionMode.value;
|
||||
});
|
||||
|
||||
@@ -1,41 +1,49 @@
|
||||
---
|
||||
title: Customizing
|
||||
description: Learn how to customize Web Awesome through parts and custom properties.
|
||||
description: Learn how to customize Web Awesome through themes, parts, and custom properties.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
## Themes
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
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.
|
||||
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:
|
||||
|
||||
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).
|
||||
```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 purple in light mode:
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.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);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-violet-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-violet-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-violet-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-violet-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-violet-30);
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-purple-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-purple-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-purple-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-purple-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-purple-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-purple-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-purple-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-purple-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
:::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.
|
||||
|
||||
## Components
|
||||
|
||||
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.
|
||||
While themes offer 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.
|
||||
|
||||
@@ -91,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
|
||||
|
||||
<style>
|
||||
.gradient-button::part(base) {
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-violet-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-violet-50);
|
||||
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
|
||||
border: solid 1px var(--wa-color-purple-50);
|
||||
transition: transform 100ms, box-shadow 100ms;
|
||||
}
|
||||
|
||||
@@ -122,3 +130,77 @@ 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>
|
||||
```
|
||||
44
docs/docs/experimental/clamped-colors.njk
Normal file
44
docs/docs/experimental/clamped-colors.njk
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Clamped Color Tokens
|
||||
layout: block
|
||||
---
|
||||
|
||||
{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
|
||||
{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
|
||||
|
||||
<table class="colors">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr class="wa-color-{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.core-column .color.swatch::before {
|
||||
counter-reset: key var(--key);
|
||||
content: counter(key);
|
||||
}
|
||||
</style>
|
||||
84
docs/docs/experimental/inherit.md
Normal file
84
docs/docs/experimental/inherit.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
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 %}
|
||||
@@ -1,352 +0,0 @@
|
||||
---
|
||||
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>
|
||||
```
|
||||
75
docs/docs/experimental/size.md
Normal file
75
docs/docs/experimental/size.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
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>
|
||||
```
|
||||
@@ -576,10 +576,10 @@ hasOutline: false
|
||||
<wa-radio value="yellow"><span style="background-color:var(--wa-color-yellow-60);"></span></wa-radio>
|
||||
<wa-radio value="lime"><span style="background-color:var(--wa-color-lime-60);"></span></wa-radio>
|
||||
<wa-radio value="green"><span style="background-color:var(--wa-color-green-60);"></span></wa-radio>
|
||||
<wa-radio value="teal"><span style="background-color:var(--wa-color-teal-60);"></span></wa-radio>
|
||||
<wa-radio value="cyan"><span style="background-color:var(--wa-color-cyan-60);"></span></wa-radio>
|
||||
<wa-radio value="blue"><span style="background-color:var(--wa-color-blue-60);"></span></wa-radio>
|
||||
<wa-radio value="indigo"><span style="background-color:var(--wa-color-indigo-60);"></span></wa-radio>
|
||||
<wa-radio value="violet"><span style="background-color:var(--wa-color-violet-60);"></span></wa-radio>
|
||||
<wa-radio value="purple"><span style="background-color:var(--wa-color-purple-60);"></span></wa-radio>
|
||||
<wa-radio value="gray"><span style="background-color:var(--wa-color-gray-60);"></span></wa-radio>
|
||||
</wa-radio-group>
|
||||
</wa-details>
|
||||
@@ -803,7 +803,7 @@ hasOutline: false
|
||||
const queue = [];
|
||||
let inputTimeout;
|
||||
|
||||
variantInput.addEventlistener('change', () => {
|
||||
variantInput.addEventListener('change', () => {
|
||||
iconList.dataset.variant = variantInput.value;
|
||||
});
|
||||
|
||||
@@ -1084,10 +1084,10 @@ hasOutline: false
|
||||
el.classList.add(`wa-theme-${theme}-${colorMode}`);
|
||||
}
|
||||
|
||||
colorModeSelect.addEventlistener('change', setColorMode);
|
||||
colorModeSelect.addEventListener('change', setColorMode);
|
||||
|
||||
// Theme Switcher
|
||||
themeSelect.addEventlistener('change', event => {
|
||||
themeSelect.addEventListener('change', event => {
|
||||
const theme = event.target.value
|
||||
const newStylesheet = Object.assign(document.createElement("link"), {
|
||||
// This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
|
||||
@@ -1132,14 +1132,14 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Color Palette
|
||||
colorSelect.addEventlistener('change', event => {
|
||||
colorSelect.addEventListener('change', event => {
|
||||
const colorPalette = event.target.value;
|
||||
|
||||
colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
|
||||
});
|
||||
|
||||
// Brand Color
|
||||
brandColor.addEventlistener('change', event => {
|
||||
brandColor.addEventListener('change', event => {
|
||||
const documentStyles = document.documentElement.style
|
||||
documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
|
||||
documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
|
||||
@@ -1223,7 +1223,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Pre-generated logos
|
||||
logoSelector.addEventlistener('change', event => {
|
||||
logoSelector.addEventListener('change', event => {
|
||||
const value = event.currentTarget.value
|
||||
|
||||
const projectLogo = previewContainer.querySelector("#project-logo");
|
||||
@@ -1279,7 +1279,7 @@ hasOutline: false
|
||||
})
|
||||
}
|
||||
|
||||
themeSelect.addEventlistener('change', setLogoIcons);
|
||||
themeSelect.addEventListener('change', setLogoIcons);
|
||||
|
||||
// Project Name
|
||||
container.querySelector('[name="project-name"]').addEventListener('input', event => {
|
||||
@@ -1293,7 +1293,7 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Heading text
|
||||
fontFamilyHeading.addEventlistener('change', event => {
|
||||
fontFamilyHeading.addEventListener('change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1351,7 +1351,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Body text
|
||||
fontFamilyBody.addEventlistener('change', event => {
|
||||
fontFamilyBody.addEventListener('change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1580,7 +1580,7 @@ hasOutline: false
|
||||
}
|
||||
|
||||
// Swaps icons to the preferred set for the selected theme
|
||||
themeSelect.addEventlistener('change', event => {
|
||||
themeSelect.addEventListener('change', event => {
|
||||
setPreferredIcons();
|
||||
showIconStyleOptions();
|
||||
syncLogoIcon();
|
||||
@@ -1599,13 +1599,13 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Changes available Icon Styles and swaps icons based on the selected Icon Family
|
||||
iconFamily.addEventlistener('change', event => {
|
||||
iconFamily.addEventListener('change', event => {
|
||||
useFaIcons();
|
||||
showIconStyleOptions();
|
||||
});
|
||||
|
||||
// Swaps icons based on the selected Icon Style
|
||||
iconStyle.addEventlistener('change', useFaIcons);
|
||||
iconStyle.addEventListener('change', useFaIcons);
|
||||
|
||||
|
||||
// Corners
|
||||
|
||||
@@ -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 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!
|
||||
==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!
|
||||
|
||||
Thank you so much for backing us!
|
||||
|
||||
@@ -20,22 +20,78 @@ As a Web Awesome backer, this early alpha release is _just for you_. Please refr
|
||||
|
||||
---
|
||||
|
||||
## Autoloading via CDN (Easiest)
|
||||
## Quick Start (Autoloading via CDN)
|
||||
|
||||
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.
|
||||
To get everything included in Web Awesome, add the following code to the `<head>` of your site:
|
||||
|
||||
```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.
|
||||
:::
|
||||
|
||||
## Setting the Base Path
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
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.
|
||||
|
||||
@@ -70,45 +126,4 @@ 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,7 +1,25 @@
|
||||
---
|
||||
title: Layout
|
||||
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.
|
||||
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.
|
||||
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,6 +7,7 @@ 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}
|
||||
@@ -36,34 +37,44 @@ 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-filled wa-neutral">Filled</button>
|
||||
<button class="wa-outlined wa-neutral">Outlined</button>
|
||||
<button class="wa-plain wa-neutral">Text</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>
|
||||
</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-filled wa-brand">Filled</button>
|
||||
<button class="wa-outlined wa-brand">Outlined</button>
|
||||
<button class="wa-plain wa-brand">Text</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>
|
||||
</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-filled wa-success">Filled</button>
|
||||
<button class="wa-outlined wa-success">Outlined</button>
|
||||
<button class="wa-plain wa-success">Text</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>
|
||||
</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-filled wa-warning">Filled</button>
|
||||
<button class="wa-outlined wa-warning">Outlined</button>
|
||||
<button class="wa-plain wa-warning">Text</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>
|
||||
</div>
|
||||
<div>
|
||||
<button class="wa-accent wa-outlined wa-danger">A + O</button>
|
||||
<button class="wa-accent wa-danger">Accent</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-outlined wa-danger">Outlined</button>
|
||||
<button class="wa-plain wa-danger">Text</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>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
noAlpha: true
|
||||
file: styles/native/callout.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -6,6 +6,7 @@ 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,6 +4,25 @@ 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,6 +7,7 @@ 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,6 +6,7 @@ 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,6 +1,7 @@
|
||||
---
|
||||
title: Native Styles
|
||||
description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
|
||||
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.
|
||||
layout: overview
|
||||
categories: ['forms', 'apps', 'content']
|
||||
override:tags: []
|
||||
@@ -19,7 +20,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 built-in elements:
|
||||
Or, to _only_ include styles for native elements:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
|
||||
|
||||
@@ -6,6 +6,7 @@ icon: input
|
||||
component: input
|
||||
elements:
|
||||
"<input>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -41,6 +42,14 @@ wa-code-demo::part(preview) {
|
||||
<wa-input label="WA Input (url)" type="url"></wa-input>
|
||||
```
|
||||
|
||||
## Pill shaped text fields
|
||||
|
||||
Add the `wa-pill` class to an `<input>` to make it pill-shaped.
|
||||
|
||||
```html {.example}
|
||||
<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
|
||||
```
|
||||
|
||||
## Color Picker
|
||||
|
||||
Basic:
|
||||
|
||||
@@ -7,6 +7,7 @@ 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,6 +7,7 @@ status: experimental
|
||||
component: progress-bar
|
||||
elements:
|
||||
"<progress>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress
|
||||
file: styles/native/progress.css
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -6,21 +6,14 @@ 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>
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
label + label {
|
||||
margin-inline-start: var(--wa-space);
|
||||
}
|
||||
</style>
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -30,9 +23,11 @@ elements:
|
||||
To set the initial value and checked state, use the `checked` attribute on the corresponding radio.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -40,9 +35,11 @@ To set the initial value and checked state, use the `checked` attribute on the c
|
||||
Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html {.example}
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2" disabled> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
@@ -50,27 +47,47 @@ Use the `disabled` attribute to disable a radio.
|
||||
Use the [size utilities](/docs/utilities/size) to change the radios' size.
|
||||
|
||||
```html {.example}
|
||||
<fieldset class="wa-size-s">
|
||||
<legend>Small</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-s wa-cluster">
|
||||
<legend>Small</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
<fieldset class="wa-size-m">
|
||||
<legend>Medium</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-m wa-cluster">
|
||||
<legend>Medium</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
||||
<fieldset class="wa-size-l">
|
||||
<legend>Large</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
<fieldset class="wa-size-l wa-cluster">
|
||||
<legend>Large</legend>
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3"> Option 3</label>
|
||||
</fieldset>
|
||||
```
|
||||
|
||||
### Orientation
|
||||
|
||||
You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-cluster">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<label><input type="radio" name="radio" value="1"> Option 1</label>
|
||||
<label><input type="radio" name="radio" value="2"> Option 2</label>
|
||||
<label><input type="radio" name="radio" value="3" checked> Option 3</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -6,6 +6,7 @@ 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,6 +7,7 @@ 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,6 +4,7 @@ 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,6 +6,7 @@ icon: textarea
|
||||
component: textarea
|
||||
elements:
|
||||
"<textarea>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
|
||||
file: styles/native/input.css
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
27
docs/docs/palettes/data.json.njk
Normal file
27
docs/docs/palettes/data.json.njk
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: null
|
||||
permalink: "/docs/palettes/data.json"
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
{
|
||||
{% for palette in collections.palettes %}
|
||||
{% set paletteId = palette.fileSlug -%}
|
||||
{% set colors = palettes[paletteId] -%}
|
||||
"{{ paletteId }}": {
|
||||
"title": "{{ palette.data.title }}",
|
||||
"colors": {
|
||||
{% for hue, tints in colors -%}
|
||||
"{{ hue }}": {
|
||||
{% for tint, value in tints -%}
|
||||
{% if tint != "05" -%}
|
||||
{% set value = value.coords or value -%}
|
||||
{% set key = "05" if tint == "5" else tint -%}
|
||||
"{{ key }}": {{ value | dump | safe }}{{ ', ' if not loop.last }}
|
||||
{%- endif %}
|
||||
{% endfor -%}
|
||||
}{{ ', ' if not loop.last }}
|
||||
{% endfor %} {# end of hue #}
|
||||
}
|
||||
}{{ ', ' if not loop.last }} {# end of palette #}
|
||||
{% endfor %}
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Default
|
||||
description: This is the palette used in the default theme.
|
||||
order: 0
|
||||
---
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
{
|
||||
"layout": "palette.njk",
|
||||
"tags": ["palettes", "palette"],
|
||||
"wide": true,
|
||||
"eleventyComputed": {
|
||||
"snippet": ".wa-palette-{{ page.fileSlug }}",
|
||||
"icon": "palette"
|
||||
"icon": "palette",
|
||||
"file": "styles/color/{{ page.fileSlug }}.css"
|
||||
}
|
||||
}
|
||||
|
||||
205
docs/docs/palettes/tweak.css
Normal file
205
docs/docs/palettes/tweak.css
Normal file
@@ -0,0 +1,205 @@
|
||||
:root {
|
||||
--fa-sliders-simple: '\f1de';
|
||||
}
|
||||
|
||||
.core-column {
|
||||
position: relative;
|
||||
|
||||
> wa-dropdown {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
wa-dropdown > .color.swatch {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.decorated-slider {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
|
||||
wa-slider {
|
||||
grid-column: 1 / -1;
|
||||
--track-height: 1em;
|
||||
--track-color-inactive: transparent;
|
||||
--track-color-active: transparent;
|
||||
--thumb-color: var(--color-tweaked, var(--color));
|
||||
--thumb-shadow: 0 0 0 var(--thumb-gap) var(--wa-color-surface-default),
|
||||
var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
calc(var(--wa-shadow-offset-x-m) * -1 + var(--thumb-gap)) var(--wa-color-shadow);
|
||||
|
||||
&:active {
|
||||
--thumb-size: 2em;
|
||||
}
|
||||
|
||||
&::part(base) {
|
||||
background: linear-gradient(to right in var(--color-interpolation-space, oklab), var(--color-1), var(--color-2));
|
||||
}
|
||||
}
|
||||
|
||||
[slot='label'] {
|
||||
min-height: 1.1lh;
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
vertical-align: middle;
|
||||
font-size: var(--wa-font-size-xs);
|
||||
|
||||
&:not(.tweaked *) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label-min,
|
||||
.label-max {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
.label-min {
|
||||
grid-column: 1;
|
||||
margin-inline-start: 0.15em;
|
||||
}
|
||||
|
||||
.label-max {
|
||||
grid-column: 3;
|
||||
margin-inline-end: 0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hue-shift-slider {
|
||||
--color-1: oklch(from var(--color) l c calc(h + var(--min, 0)));
|
||||
--color-2: oklch(from var(--color) l c calc(h + var(--max, 0)));
|
||||
--color-interpolation-space: oklch;
|
||||
}
|
||||
|
||||
.chroma-scale-slider {
|
||||
--color: var(--wa-color-brand);
|
||||
--color-1: oklch(from var(--color) l calc(c * var(--min)) h);
|
||||
--color-2: oklch(from var(--color) l calc(c * var(--max)) h);
|
||||
}
|
||||
|
||||
.gray-chroma-slider {
|
||||
--color: var(--wa-color-gray);
|
||||
--color-1: oklch(from var(--wa-color-gray) l 0 none);
|
||||
--color-2: oklch(from var(--color-gray-undertone) l calc(c * var(--max)) h);
|
||||
margin-top: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.popup {
|
||||
background: var(--wa-color-surface-default);
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
padding: var(--wa-space-xl);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.color-scale {
|
||||
th {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td:not([data-hue='gray'] *) {
|
||||
--tweak-c: calc(c * var(--chroma-scale, 1));
|
||||
--tweak-h: calc(h + var(--hue-shift, 0));
|
||||
|
||||
--color-tweaked-no-chroma-scale: oklch(from var(--color) l c var(--tweak-h));
|
||||
--color-tweaked-no-hue-shift: oklch(from var(--color) l var(--tweak-c) h);
|
||||
|
||||
&:is([data-tint='90'], [data-tint='95']) {
|
||||
/* Work around https://bugs.webkit.org/show_bug.cgi?id=287637 */
|
||||
|
||||
--color-tweaked-no-chroma-scale: lch(from var(--color) l c var(--tweak-h));
|
||||
--color-tweaked-no-hue-shift: lch(from var(--color) l var(--tweak-c) h);
|
||||
|
||||
/* outline: 1px dashed red; */
|
||||
}
|
||||
}
|
||||
|
||||
.color.swatch {
|
||||
--color-2: var(--color-tweaked);
|
||||
--color-2-height: 100%;
|
||||
|
||||
&:is(.tweaking *) {
|
||||
--color-2-height: 70%;
|
||||
}
|
||||
|
||||
&:is(.tweaking-chroma *) {
|
||||
--color: var(--color-tweaked-no-chroma-scale);
|
||||
}
|
||||
|
||||
&:is(.tweaking-hue *) {
|
||||
--color: var(--color-tweaked-no-hue-shift);
|
||||
}
|
||||
|
||||
&:is(.tweaking-gray-chroma *) {
|
||||
--color: var(--color-tweaked-no-gray-chroma);
|
||||
}
|
||||
}
|
||||
|
||||
.tweak-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: var(--wa-space-s);
|
||||
opacity: var(--tweak-icon-opacity, 0%);
|
||||
}
|
||||
|
||||
.core-column:hover {
|
||||
--tweak-icon-opacity: 40%;
|
||||
}
|
||||
|
||||
&.tweaked .core-column {
|
||||
--tweak-icon-opacity: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.tweaked-callout {
|
||||
padding: var(--wa-space-xs);
|
||||
padding-inline-start: var(--wa-space-m);
|
||||
align-items: center;
|
||||
|
||||
&:not(.tweaked-any *) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&::part(message) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
wa-button:first-of-type {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Better UI before Vue initializes */
|
||||
[v-if='saved'],
|
||||
[v-if^='tweaked'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.core-color {
|
||||
wa-radio-button::part(base) {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: 0;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
background: var(--color);
|
||||
background-clip: border-box;
|
||||
}
|
||||
|
||||
wa-radio-button:is([checked], :state(checked))::part(base) {
|
||||
box-shadow:
|
||||
inset 0 0 0 var(--indicator-width) var(--indicator-color),
|
||||
inset 0 0 0 calc(var(--indicator-width) + 1.5px) var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
&::part(form-control-input) {
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
}
|
||||
580
docs/docs/palettes/tweak.js
Normal file
580
docs/docs/palettes/tweak.js
Normal file
@@ -0,0 +1,580 @@
|
||||
// TODO move these to local imports
|
||||
import Color from 'https://colorjs.io/dist/color.js';
|
||||
import { createApp, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
|
||||
import { cdnUrl, hueRanges, hues, Permalink, tints } from '../../assets/scripts/tweak.js';
|
||||
import { cssImport, cssLiteral, cssRule } from '../../assets/scripts/tweak/code.js';
|
||||
import { maxGrayChroma, moreHue, selectors, urls } from '../../assets/scripts/tweak/data.js';
|
||||
import { subtractAngles } from '../../assets/scripts/tweak/util.js';
|
||||
import Prism from '/assets/scripts/prism.js';
|
||||
|
||||
await Promise.all(['wa-slider'].map(tag => customElements.whenDefined(tag)));
|
||||
|
||||
// // Detect https://bugs.webkit.org/show_bug.cgi?id=287637
|
||||
// const SAFARI_OKLCH_BUG = (() => {
|
||||
// let dummy = document.createElement('div');
|
||||
// document.body.appendChild(dummy);
|
||||
// dummy.style.color = 'oklch(from #d5e0e6 l c h)';
|
||||
// let computedColor = getComputedStyle(dummy).color;
|
||||
// dummy.remove();
|
||||
// return computedColor.endsWith(' 0)');
|
||||
// })();
|
||||
|
||||
let allPalettes = await fetch('/docs/palettes/data.json').then(r => r.json());
|
||||
globalThis.allPalettes = allPalettes;
|
||||
|
||||
for (let palette in allPalettes) {
|
||||
for (let hue in allPalettes[palette].colors) {
|
||||
let scale = allPalettes[palette].colors[hue];
|
||||
for (let tint of tints) {
|
||||
let color = scale[tint];
|
||||
|
||||
if (Array.isArray(color)) {
|
||||
scale[tint] = new Color('oklch', color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const percentFormatter = value => value.toLocaleString(undefined, { style: 'percent' });
|
||||
|
||||
let paletteAppSpec = {
|
||||
data() {
|
||||
let appRoot = document.querySelector('#palette-app');
|
||||
let paletteId = appRoot.dataset.paletteId;
|
||||
let palette = allPalettes[paletteId];
|
||||
|
||||
return {
|
||||
uid: undefined,
|
||||
paletteId,
|
||||
paletteTitle: palette.title,
|
||||
originalColors: palette.colors,
|
||||
permalink: new Permalink(),
|
||||
hueRanges,
|
||||
hueShifts: Object.fromEntries(hues.map(hue => [hue, 0])),
|
||||
chromaScale: 1,
|
||||
grayChroma: undefined,
|
||||
grayColor: undefined,
|
||||
tweaking: {},
|
||||
saved: null,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
// Non-reactive variables to expose
|
||||
Object.assign(this, { moreHue });
|
||||
|
||||
// Read URL params and apply them. This facilitates permalinks.
|
||||
this.permalink.mapObject(this.hueShifts, {
|
||||
keyTo: key => key.replace(/-shift$/, ''),
|
||||
keyFrom: key => key + '-shift',
|
||||
valueFrom: value => (!value ? '' : Number(value)),
|
||||
valueTo: value => (!value ? 0 : Number(value)),
|
||||
});
|
||||
|
||||
this.grayChroma = this.originalGrayChroma;
|
||||
this.grayColor = this.originalGrayColor;
|
||||
|
||||
if (location.search) {
|
||||
// Update from URL
|
||||
this.permalink.writeTo(this.hueShifts);
|
||||
|
||||
for (let param of ['chroma-scale', 'gray-color', 'gray-chroma']) {
|
||||
if (this.permalink.has(param)) {
|
||||
let value = this.permalink.get(param);
|
||||
|
||||
if (!isNaN(value)) {
|
||||
// Convert numeric values to numbers
|
||||
value = Number(value);
|
||||
}
|
||||
|
||||
let prop = camelCase(param);
|
||||
this[prop] = value;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.permalink.has('uid')) {
|
||||
this.uid = Number(this.permalink.get('uid'));
|
||||
}
|
||||
|
||||
this.saved = sidebar.palette.getSaved(this.getPalette());
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
for (let ref in this.$refs) {
|
||||
this.$refs[ref].tooltipFormatter = percentFormatter;
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tweaks() {
|
||||
return {
|
||||
hueShifts: this.hueShifts,
|
||||
chromaScale: this.chromaScale,
|
||||
grayColor: this.grayColor,
|
||||
grayChroma: this.grayChroma,
|
||||
};
|
||||
},
|
||||
|
||||
isTweaked() {
|
||||
return Object.values(this.hueShifts).some(Boolean);
|
||||
},
|
||||
|
||||
code() {
|
||||
let ret = {};
|
||||
for (let language of ['html', 'css']) {
|
||||
let code = getPaletteCode(this.paletteId, this.colors, this.tweaked, { language, cdnUrl });
|
||||
ret[language] = {
|
||||
raw: code,
|
||||
highlighted: Prism.highlight(code, Prism.languages[language], language),
|
||||
};
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
colors() {
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, this.tweaked);
|
||||
},
|
||||
|
||||
colorsMinusChromaScale() {
|
||||
let tweaked = { ...this.tweaked, chromaScale: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
},
|
||||
|
||||
colorsMinusHueShifts() {
|
||||
let tweaked = { ...this.tweaked, hue: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
},
|
||||
|
||||
colorsMinusGrayChroma() {
|
||||
let tweaked = { ...this.tweaked, grayChroma: false };
|
||||
return applyTweaks.call(this, this.originalColors, this.tweaks, tweaked);
|
||||
},
|
||||
|
||||
tweaked() {
|
||||
let anyHueTweaked = Object.values(this.hueShifts).some(Boolean);
|
||||
let hue = anyHueTweaked
|
||||
? Object.fromEntries(Object.entries(this.hueShifts).map(([hue, shift]) => [hue, shift !== 0]))
|
||||
: false;
|
||||
|
||||
let ret = {
|
||||
chromaScale: this.chromaScale !== 1,
|
||||
hue,
|
||||
grayChroma: this.grayChroma !== this.originalGrayChroma,
|
||||
grayColor: this.grayColor !== this.originalGrayColor,
|
||||
};
|
||||
|
||||
let anyTweaked = Object.values(ret).some(Boolean);
|
||||
return anyTweaked ? ret : false;
|
||||
},
|
||||
|
||||
tweaksHumanReadable() {
|
||||
let ret = {};
|
||||
|
||||
if (this.chromaScale !== 1) {
|
||||
ret.chromaScale = 'More ' + (this.chromaScale > 1 ? 'vibrant' : 'muted');
|
||||
}
|
||||
|
||||
for (let hue in this.hueShifts) {
|
||||
let shift = this.hueShifts[hue];
|
||||
|
||||
if (!shift) {
|
||||
continue;
|
||||
}
|
||||
|
||||
let relHue = shift < 0 ? arrayPrevious(hues, hue) : arrayNext(hues, hue);
|
||||
let hueTweak = moreHue[relHue] ?? relHue + 'er';
|
||||
|
||||
ret[hue] = capitalize(hueTweak + ' ' + hue + 's');
|
||||
}
|
||||
|
||||
if (this.tweaked.grayChroma || this.tweaked.grayColor) {
|
||||
if (this.tweaked.grayChroma === 0) {
|
||||
ret.grayChroma = 'Achromatic grays';
|
||||
} else {
|
||||
if (this.tweaked.grayColor) {
|
||||
ret.grayColor = capitalize(this.grayColor) + ' gray undertone';
|
||||
}
|
||||
|
||||
if (this.tweaked.grayChroma) {
|
||||
let more = this.tweaked.grayChroma > this.originalGrayChroma;
|
||||
ret.grayChroma = `More ${more ? 'colorful' : 'neutral'} grays`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
originalContrasts() {
|
||||
return getContrasts(this.originalColors);
|
||||
},
|
||||
|
||||
contrasts() {
|
||||
return getContrasts(this.colors, this.originalContrasts);
|
||||
},
|
||||
|
||||
originalCoreColors() {
|
||||
let ret = {};
|
||||
for (let hue in this.originalColors) {
|
||||
let maxChromaTintRaw = this.originalColors[hue].maxChromaTintRaw;
|
||||
ret[hue] = this.originalColors[hue][maxChromaTintRaw];
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
|
||||
coreColors() {
|
||||
let ret = {};
|
||||
for (let hue in this.colors) {
|
||||
let maxChromaTintRaw = this.colors[hue].maxChromaTintRaw;
|
||||
ret[hue] = this.colors[hue][maxChromaTintRaw];
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
|
||||
originalGrayColor() {
|
||||
let grayHue = this.originalCoreColors.gray.get('h');
|
||||
let minDistance = Infinity;
|
||||
let closestHue = null;
|
||||
|
||||
for (let name in this.originalCoreColors) {
|
||||
if (name === 'gray') {
|
||||
continue;
|
||||
}
|
||||
|
||||
let hue = this.originalCoreColors[name].get('h');
|
||||
let distance = Math.abs(subtractAngles(hue, grayHue));
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestHue = name;
|
||||
}
|
||||
}
|
||||
|
||||
return closestHue ?? 'indigo';
|
||||
},
|
||||
|
||||
originalGrayChroma() {
|
||||
let coreTint = this.originalColors.gray.maxChromaTint;
|
||||
let grayChroma = this.originalColors.gray[coreTint].get('c');
|
||||
if (grayChroma === 0 || grayChroma === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
let grayColorChroma = this.originalColors[this.originalGrayColor][coreTint].get('c');
|
||||
return grayChroma / grayColorChroma;
|
||||
},
|
||||
|
||||
/**
|
||||
* We want to preserve the original grayChroma selection so that when the user switches to another undertone
|
||||
* that supports higher chromas, their selection will be there.
|
||||
* This property is the gray chroma % that is actually applied.
|
||||
*/
|
||||
computedGrayChroma() {
|
||||
return Math.min(this.grayChroma, this.maxGrayChroma);
|
||||
},
|
||||
|
||||
maxGrayChroma() {
|
||||
return maxGrayChroma[this.grayColor] ?? 0.3;
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
hueShifts: {
|
||||
deep: true,
|
||||
handler() {
|
||||
this.permalink.readFrom(this.hueShifts);
|
||||
},
|
||||
},
|
||||
|
||||
chromaScale() {
|
||||
this.permalink.set('chroma-scale', this.chromaScale, 1);
|
||||
},
|
||||
|
||||
grayColor() {
|
||||
this.permalink.set('gray-color', this.grayColor, this.originalGrayColor);
|
||||
},
|
||||
|
||||
grayChroma() {
|
||||
this.permalink.set('gray-chroma', this.grayChroma, this.originalGrayChroma);
|
||||
},
|
||||
|
||||
tweaks: {
|
||||
deep: true,
|
||||
async handler(value, oldValue) {
|
||||
await nextTick(); // must run after individual watchers
|
||||
|
||||
// Update page URL
|
||||
this.permalink.updateLocation();
|
||||
|
||||
if (this.saved) {
|
||||
this.save({ silent: true });
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPalette() {
|
||||
return { id: this.paletteId, uid: this.uid, search: location.search };
|
||||
},
|
||||
|
||||
save({ silent } = {}) {
|
||||
let title = silent
|
||||
? (this.saved?.title ?? this.paletteTitle)
|
||||
: prompt('Palette title:', `${this.paletteTitle} (tweaked)`);
|
||||
|
||||
if (!title) {
|
||||
return;
|
||||
}
|
||||
|
||||
let uid = this.uid;
|
||||
|
||||
if (!uid) {
|
||||
// First time saving
|
||||
this.uid = uid = sidebar.palette.getUid();
|
||||
|
||||
this.permalink.set('uid', uid);
|
||||
this.permalink.updateLocation();
|
||||
}
|
||||
|
||||
let palette = { ...this.getPalette(), uid, title };
|
||||
|
||||
sidebar.palette.save(palette, this.saved);
|
||||
this.saved = palette;
|
||||
},
|
||||
|
||||
rename() {
|
||||
if (!this.saved) {
|
||||
return;
|
||||
}
|
||||
|
||||
let newTitle = prompt('New title:', this.saved.title);
|
||||
|
||||
if (!newTitle) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.saved.title = newTitle;
|
||||
sidebar.palette.save(this.saved);
|
||||
},
|
||||
|
||||
deleteSaved() {
|
||||
sidebar.palette.delete(this.saved);
|
||||
},
|
||||
|
||||
postDelete() {
|
||||
this.saved = null;
|
||||
this.permalink.delete('uid');
|
||||
this.uid = undefined;
|
||||
this.permalink.updateLocation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove a specific tweak or all tweaks
|
||||
* @param {string} [param] - The tweak to remove. If not provided, all tweaks are removed.
|
||||
*/
|
||||
reset(param) {
|
||||
if (!param || param === 'chromaScale') {
|
||||
this.chromaScale = 1;
|
||||
}
|
||||
|
||||
if (param in this.hueShifts) {
|
||||
this.hueShifts[param] = 0;
|
||||
} else if (!param) {
|
||||
for (let hue in this.hueShifts) {
|
||||
this.hueShifts[hue] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (!param || param === 'grayColor') {
|
||||
this.grayColor = this.originalGrayColor;
|
||||
}
|
||||
|
||||
if (!param || param === 'grayChroma') {
|
||||
this.grayChroma = this.originalGrayChroma;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
directives: {
|
||||
// Like v-text, but doesn't complain if the element has content,
|
||||
// making it possible to use in a PE fashion, with the contents being the fallback
|
||||
content(el, { value, arg }) {
|
||||
if (!el.dataset.fallback) {
|
||||
// Store the original content as a fallback the first time
|
||||
el.dataset.fallback = el.textContent;
|
||||
}
|
||||
|
||||
if (value === '') {
|
||||
value = el.dataset.fallback;
|
||||
} else {
|
||||
if (arg === 'number') {
|
||||
value = Number(value).toLocaleString(undefined, { maximumSignificantDigits: 2 });
|
||||
}
|
||||
}
|
||||
|
||||
if (arg === 'html') {
|
||||
el.innerHTML = value;
|
||||
} else {
|
||||
el.textContent = value;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
compilerOptions: {
|
||||
isCustomElement: tag => tag.startsWith('wa-'),
|
||||
},
|
||||
};
|
||||
|
||||
function init() {
|
||||
let paletteAppContainer = document.querySelector('#palette-app');
|
||||
globalThis.paletteApp?.unmount?.();
|
||||
|
||||
if (!paletteAppContainer) {
|
||||
return;
|
||||
}
|
||||
|
||||
globalThis.paletteApp = createApp(paletteAppSpec).mount(paletteAppContainer);
|
||||
}
|
||||
|
||||
init();
|
||||
addEventListener('turbo:render', init);
|
||||
|
||||
export function getPaletteCode(paletteId, colors, tweaked, options) {
|
||||
let imports = [];
|
||||
|
||||
if (paletteId) {
|
||||
imports.push(urls.palette(paletteId));
|
||||
}
|
||||
|
||||
let css = '';
|
||||
let declarations = [];
|
||||
|
||||
if (tweaked) {
|
||||
for (let hue in colors) {
|
||||
if (hue === 'orange') {
|
||||
continue;
|
||||
} else if (hue === 'gray') {
|
||||
if (!tweaked.grayChroma && !tweaked.grayColor) {
|
||||
continue;
|
||||
}
|
||||
} else if (!tweaked.chromaScale && !tweaked.hue?.[hue]) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let tint of tints) {
|
||||
let color = colors[hue][tint];
|
||||
let stringified = color.toString({ format: color.inGamut('srgb') ? 'hex' : undefined });
|
||||
declarations.push(`--wa-color-${hue}-${tint}: ${stringified};`);
|
||||
}
|
||||
|
||||
declarations.push('');
|
||||
}
|
||||
|
||||
if (declarations.length > 0) {
|
||||
css += cssRule(selectors.palette(paletteId), declarations);
|
||||
}
|
||||
}
|
||||
|
||||
let ret = imports.map(url => cssImport(url, options)).join('\n');
|
||||
|
||||
if (css) {
|
||||
ret += `\n\n${cssLiteral(css, options)}`;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function arrayNext(array, element) {
|
||||
let index = array.indexOf(element);
|
||||
return array[(index + 1) % array.length];
|
||||
}
|
||||
|
||||
function arrayPrevious(array, element) {
|
||||
let index = array.indexOf(element);
|
||||
return array[(index - 1 + array.length) % array.length];
|
||||
}
|
||||
|
||||
function applyTweaks(originalColors, tweaks, tweaked) {
|
||||
let ret = {};
|
||||
let { hueShifts, chromaScale = 1, grayColor, grayChroma } = tweaks;
|
||||
|
||||
if (!tweaked) {
|
||||
return originalColors;
|
||||
}
|
||||
|
||||
if (tweaked.grayChroma) {
|
||||
grayChroma = this.computedGrayChroma;
|
||||
}
|
||||
|
||||
for (let hue in originalColors) {
|
||||
let originalScale = originalColors[hue];
|
||||
let scale = (ret[hue] = {});
|
||||
let descriptors = Object.getOwnPropertyDescriptors(originalScale);
|
||||
Object.defineProperties(scale, {
|
||||
maxChromaTint: { ...descriptors.maxChromaTint, enumerable: false },
|
||||
maxChromaTintRaw: { ...descriptors.maxChromaTintRaw, enumerable: false },
|
||||
});
|
||||
|
||||
for (let tint of tints) {
|
||||
let color = originalScale[tint].clone();
|
||||
|
||||
if (tweaked.hue && hueShifts[hue]) {
|
||||
color.set({ h: h => h + hueShifts[hue] });
|
||||
}
|
||||
|
||||
if (tweaked.chromaScale && chromaScale !== 1) {
|
||||
color.set({ c: c => c * chromaScale });
|
||||
}
|
||||
|
||||
if (hue === 'gray' && (tweaked.grayChroma || tweaked.grayColor)) {
|
||||
let colorUndertone = originalColors[grayColor][tint].clone();
|
||||
color = colorUndertone.set({ c: c => c * grayChroma });
|
||||
}
|
||||
|
||||
scale[tint] = color;
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
function camelCase(str) {
|
||||
return (str + '').replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
|
||||
}
|
||||
|
||||
function capitalize(str) {
|
||||
return str[0].toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
function getContrasts(colors, originalContrasts) {
|
||||
let ret = {};
|
||||
|
||||
for (let hue in colors) {
|
||||
ret[hue] = {};
|
||||
|
||||
for (let tintBg of tints) {
|
||||
ret[hue][tintBg] = {};
|
||||
let bgColor = colors[hue][tintBg];
|
||||
|
||||
if (!bgColor || !bgColor.contrast) {
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let tintFg of tints) {
|
||||
let fgColor = colors[hue][tintFg];
|
||||
let value = bgColor.contrast(fgColor, 'WCAG21');
|
||||
if (originalContrasts) {
|
||||
let original = originalContrasts[hue][tintBg][tintFg];
|
||||
ret[hue][tintBg][tintFg] = { value, original, bgColor, fgColor };
|
||||
} else {
|
||||
ret[hue][tintBg][tintFg] = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
43
docs/docs/patterns/app/action-panel.md
Normal file
43
docs/docs/patterns/app/action-panel.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Action Panel
|
||||
description: 'These patterns help add user actions to dashboards'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 480px; margin: 0 auto;">
|
||||
<div class="wa-align-items-start wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">New Dashboard</h3>
|
||||
<p>Arrange your data into a single view.</p>
|
||||
<wa-button variant="brand">Build Dashboard</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
### with right flank
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Query with the SQL Runner</h3>
|
||||
<p>Access your database to run ad-hoc queries.</p>
|
||||
</div>
|
||||
<wa-button appearance="outlined">New Query</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
### with switch
|
||||
```html {.example}
|
||||
<wa-card style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Auto-renew</h3>
|
||||
<p>We'll send you a reminder 30 days before we draft your account.</p>
|
||||
</div>
|
||||
<wa-switch size="large"></wa-switch>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
75
docs/docs/patterns/app/comments.md
Normal file
75
docs/docs/patterns/app/comments.md
Normal file
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Comments
|
||||
description: 'For feedback forms and message boxes'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### In card with footer
|
||||
```html{.example}
|
||||
<form class="comment-box" style="max-width: 960px; margin: 0 auto;">
|
||||
<wa-card with-footer>
|
||||
<wa-textarea resize="horizontal"></wa-textarea>
|
||||
<div slot="footer" class="wa-cluster" style="justify-content: flex-end;">
|
||||
<wa-button appearance="outlined">
|
||||
<wa-icon slot="prefix" name="paperclip" variant="solid"></wa-icon>
|
||||
Attach a file
|
||||
</wa-button>
|
||||
<wa-button variant="success">Comment</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</form>
|
||||
```
|
||||
|
||||
### with avatar and icon buttons
|
||||
```html{.example}
|
||||
<div class="wa-callout wa-neutral wa-outlined" style="max-width: 960px; margin: 0 auto;">
|
||||
<div class="wa-align-items-start wa-flank">
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" label="User avatar"></wa-avatar>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<wa-textarea placeholder="Add to the conversation..." size="medium"></wa-textarea>
|
||||
<div class="wa-split">
|
||||
<div>
|
||||
<wa-icon-button name="link" variant="solid" label="Bold"></wa-icon-button>
|
||||
<wa-icon-button name="face-smile" variant="solid" label="Italic"></wa-icon-button>
|
||||
</div>
|
||||
</wa-button><wa-button>Comment</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With multiple actions
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 640px; margin: 0 auto;">
|
||||
<div slot="header">
|
||||
<h2 class="wa-heading-s">I watched...</h2>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<div>
|
||||
<img src="https://a.ltrbxd.com/resized/film-poster/1/0/2/5/3/3/1/1025331-heretic-2024-0-1000-0-1500-crop.jpg?v=c79c5c8121" width="40"/>
|
||||
</div>
|
||||
<span class="wa-heading-l">Heretic</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<span class="wa-heading-s">Date</span><span class="wa-caption-m">Thursday, March 13, 2025</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<wa-rating label="Rating"></wa-rating>
|
||||
<wa-checkbox>Loved it!</wa-checkbox>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-textarea placeholder="Add review..."></wa-textarea>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid">
|
||||
<wa-button appearance="outlined">Cancel</wa-button>
|
||||
<wa-button variant="brand">Save</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
161
docs/docs/patterns/app/data-display.md
Normal file
161
docs/docs/patterns/app/data-display.md
Normal file
@@ -0,0 +1,161 @@
|
||||
---
|
||||
title: Data Display
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### With icon
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid" style="max-width: 960px; margin: 0 auto">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="square" label="Square avatar" class="wa-callout wa-neutral">
|
||||
<wa-icon slot="icon" name="user-plus" variant="solid"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-heading-xs">Total Subscribers</span>
|
||||
<div class="wa-cluster">
|
||||
<span class="wa-heading-l">71,897</span>
|
||||
<wa-tag size="small" variant="success" appearance="filled outlined" pill><wa-icon fixed-width name="arrow-up"></wa-icon> 122</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Multi column
|
||||
|
||||
```html{.example}
|
||||
<div style="max-width: 480px; margin: 0 auto">
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon family="brands" name="youtube"></wa-icon>
|
||||
<div class="wa-align-items-center wa-cluster" style="justify-content: space-between;">
|
||||
<span>YouTube Premium</span>
|
||||
<span>5 minutes ago</span>
|
||||
<wa-tag variant="danger" appearance="outlined filled" pill>-$5.00</wa-tag>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Card with condensed information
|
||||
```html{.example}
|
||||
<wa-card style="max-width: 480px; margin: 0 auto;">
|
||||
<div class="wa-stack">
|
||||
<section class="wa-split">
|
||||
<a href="#" class="wa-cluster wa-gap-xs wa-align-items-center">
|
||||
<span class="wa-caption-m">query</span>
|
||||
<span class="wa-heading-m">getUser</span>
|
||||
<wa-icon fixed-width name="arrow-right"></wa-icon>
|
||||
</a>
|
||||
<wa-icon-button fixed-width name="ellipsis" label="actions"></wa-icon-button>
|
||||
</section>
|
||||
<section class="wa-cluster">
|
||||
<span class="wa-caption-l">7.15M request • 9% • 734msP95</span>
|
||||
</section>
|
||||
<section class="wa-split">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span class="wa-caption-l">Cache Hit Rate</span>
|
||||
<span class="wa-heading-2xl">12.3%</span>
|
||||
<wa-badge appearance="filled outlined" variant="danger"><wa-icon name="arrow-down"></wa-icon> down from 19.6%</wa-badge>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span class="wa-caption-l">Max CHR</span>
|
||||
<span class="wa-heading-2xl">72.6%</span>
|
||||
<wa-badge appearance="filled outlined" variant="success"><wa-icon name="arrow-up"></wa-icon> CHR Impact +5.4%</wa-badge>
|
||||
</div>
|
||||
</section>
|
||||
<wa-divider></wa-divider>
|
||||
<section class="wa-stack">
|
||||
<span class="wa-heading-m">90.5 GB (69.8%)</span>
|
||||
<div class="wa-split">
|
||||
<span>Cacheable Bandwidth</span>
|
||||
<span class="wa-cluster wa-gap-2xs">
|
||||
<wa-icon fixed-width name="dollar-sign"></wa-icon>
|
||||
<span>$9.50</span>
|
||||
<wa-icon fixed-width name="circle-question"></wa-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="9.8" label="Upload progress"></wa-progress-bar>
|
||||
<span class="wa-caption-m">Cached 12.8GB (9.8%)</span>
|
||||
<span class="wa-caption-m">Non-Cacheable 26.3GB (91.2)</span>
|
||||
<span class="wa-heading-s">Total 129.6GB</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
244
docs/docs/patterns/app/description-list.md
Normal file
244
docs/docs/patterns/app/description-list.md
Normal file
@@ -0,0 +1,244 @@
|
||||
---
|
||||
title: Description List
|
||||
description: 'Shows the user information with labels and values in an easy to read format.'
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h3 class="wa-heading-m">Applicant Info</h3>
|
||||
<p class="wa-caption-m">Personal details.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-stack wa-gap-2xl">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m">Bucky Barnes</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m">Machine Learning Engineer</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m">winter_soldier@example.com</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m">
|
||||
$240,00
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m">After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I loves, and I'm always striving to atone for those dark days as the Winter Soldier.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Two Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2 class="wa-heading-m">Applicant Information</h2>
|
||||
<p class="wa-caption-m">Personal details and application.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-grid wa-gap-2xl" style="--min-column-size: 40ch;">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m">Bucky Barnes</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m">Machine Learning Engineer</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m">winter_soldier@example.com</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m">
|
||||
$240,00
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank wa-span-grid" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m">After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I loves, and I'm always striving to atone for those dark days as the Winter Soldier.
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank wa-span-grid" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
### Multi Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2 class="wa-heading-m">Applicant Information</h2>
|
||||
<p class="wa-caption-m">Personal details and application.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<dl class="wa-stack wa-gap-2xl">
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Full name</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>Bucky Barnes</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Application for</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>Machine Learning Engineer</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Email address</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>winter_soldier@example.com</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Salary expectation</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<span>$240,00</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">About</dt>
|
||||
<dd class="wa-caption-m wa-split">
|
||||
<p style="max-width: 70ch;">After being lost in action and brainwashed into becoming Hydra's ruthless assassin, my journey is one of redemption, healing, and reclaiming my true self. Though burdened with the weight of the past, I remain a fierce warrior, loyal to those I loves, and I'm always striving to atone for those dark days as the Winter Soldier.</p>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Update</wa-button>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="wa-align-items-start wa-flank" style="--flank-size: 15%;">
|
||||
<dt class="wa-heading-xs">Attachments</dt>
|
||||
<dd>
|
||||
<wa-card>
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_resume.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="paperclip"></wa-icon>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-m wa-cluster">
|
||||
<span>bb_cover_letter.pdf</span>
|
||||
<span>2.4mb</span>
|
||||
</span>
|
||||
<wa-button appearance="plain" variant="brand" size="small">Download</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
### Narrow with Invoice Details
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer class="wa-callout wa-neutral" style="max-width: 480px; margin: 0 auto;">
|
||||
<div slot="header" class="wa-split">
|
||||
<dl class="wa-stack wa-gap-2xs">
|
||||
<dt class="wa-heading-s">Amount</dt>
|
||||
<dd class="wa-heading-l">$10,560.00</dd>
|
||||
</dl>
|
||||
<wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
|
||||
</div>
|
||||
<div>
|
||||
<dl class="wa-stack" style="margin: 0;">
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon name="user"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">Sam Wilson</dd>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon name="calendar-days"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">June 8, 2015</dd>
|
||||
</div>
|
||||
<div class="wa-flank wa-align-items-stretch">
|
||||
<dt><wa-icon family="brands" name="cc-visa"></wa-icon></dt>
|
||||
<dd class="wa-heading-s">Paid with Visa</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#" class="wa-flank wa-align-items-center wa-gap-2xs">
|
||||
<span>Download Receipt</span>
|
||||
<wa-icon name="arrow-right"></wa-icon>
|
||||
</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
113
docs/docs/patterns/app/empty-state.md
Normal file
113
docs/docs/patterns/app/empty-state.md
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Empty State
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
## Examples
|
||||
|
||||
### Simple
|
||||
```html{.example}
|
||||
<div class="wa-stack wa-align-items-center">
|
||||
<wa-icon name="folder" style="font-size: 60px;"></wa-icon>
|
||||
<span class="wa-heading-s">No Projects</span>
|
||||
<p class="wa-caption-m">Get started by creating a new project.</p>
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="plus"></wa-icon>
|
||||
New Project
|
||||
</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With border
|
||||
|
||||
```html{.example}
|
||||
<a href="#" class="wa-align-items-center wa-callout wa-neutral wa-outlined wa-stack" style="max-width: 480px; margin: 0 auto; text-decoration: none;">
|
||||
<wa-icon name="database" style="font-size: 64px;"></wa-icon>
|
||||
<div class="wa-stack wa-align-items-center wa-gap-2xs">
|
||||
<p class="wa-heading-m">No DBs</p>
|
||||
<p>Get started by creating a database.</p>
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
### With starting points
|
||||
|
||||
```html{.example}
|
||||
<wa-card with-header with-footer style="max-width: 720px; margin: 0 auto;">
|
||||
<div slot="header" class="wa-stack wa-gap-xs">
|
||||
<h2 class="wa-heading-m">Projects</h2>
|
||||
<p class="wa-caption-m">You haven’t created a project yet. Get started by selecting a template or start from an empty project.</p>
|
||||
</div>
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="bars" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a List <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Another to-do system you’ll try but eventually give up on.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="image" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Gallery <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Great for mood boards and inspiration.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#"class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="table-cells" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Spreadsheet <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Helps keep up with the numbers.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="calendar" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Calendar <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Stay on top of your deadlines, or don’t — it’s up to you.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="table-columns" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Board <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Track tasks in different stages of your project.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="wa-flank" style="text-decoration: none;">
|
||||
<wa-icon name="clock" class="wa-callout wa-neutral wa-outlined" style="font-size: 16px;"></wa-icon>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span class="wa-align-items-center wa-cluster wa-gap-xs wa-heading-s">
|
||||
Create a Timeline <wa-icon name="arrow-right"></wa-icon>
|
||||
</span>
|
||||
<p class="wa-caption-m">
|
||||
Get a birds-eye-view of your procrastination.
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="#">Or start from an empty project →</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
92
docs/docs/patterns/app/faq.md
Normal file
92
docs/docs/patterns/app/faq.md
Normal file
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: FAQ
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<div>
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<p>Can’t find the answer you’re looking for? Reach out to our <a href="#">customer support</a> team.</p>
|
||||
</div>
|
||||
<dl class="wa-stack wa-gap-m">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto;">
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
<wa-details summary="How do you make holy water?">
|
||||
You boil the hell out of it.
|
||||
</wa-details>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div>
|
||||
|
||||
<h2>Frequently Asked Questions</h2>
|
||||
|
||||
|
||||
<dl class="wa-stack wa-gap-m">
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-grid wa-gap-xs">
|
||||
<dt class="wa-heading-m">How do you make holy water?</dt>
|
||||
<dd class="wa-caption-l">You boil the hell out of it. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
```
|
||||
86
docs/docs/patterns/app/feed.md
Normal file
86
docs/docs/patterns/app/feed.md
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Feed
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<div class="activity-feed">
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="user-circle" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="thumbs-up" style="color: blue" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="crown" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="activity-group">
|
||||
<span class="connector"></span>
|
||||
<div class="activity">
|
||||
<wa-icon name="turtle" style="color: green" class="fa-fw"></wa-icon>
|
||||
<p>Kicked ass and <strong>chewed bubblegum</strong></p>
|
||||
<span style="margin-left: auto"><em>Oct. 31st</em></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
.activity-feed {
|
||||
wa-icon {
|
||||
margin-right: 1rem;
|
||||
font-size: 32px;
|
||||
}
|
||||
.fa-fw {
|
||||
text-align: center;
|
||||
width: 1.25em;
|
||||
}
|
||||
.activity {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.activity-group:not(:first-child) {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.activity-group {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.connector {
|
||||
position: absolute;
|
||||
background-color: var(--border-color);
|
||||
height: 25%;
|
||||
width: 0.125rem;
|
||||
margin-left: -1px;
|
||||
top: 2.5rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.activity-group:last-of-type .connector {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
166
docs/docs/patterns/app/grid.md
Normal file
166
docs/docs/patterns/app/grid.md
Normal file
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Grid
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 30ch;">
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-flank:end">
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<span>
|
||||
<strong>John Carpenter</strong>
|
||||
<wa-badge pill>Admin</wa-badge>
|
||||
</span>
|
||||
<span>Master of Horror</span>
|
||||
</div>
|
||||
<wa-avatar image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"label="Avatar of a gray tabby kitten looking down">
|
||||
</wa-avatar>
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid" style="--min-column-size: 16ch;">
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="at"></wa-icon>Email</wa-button>
|
||||
<wa-button appearance="outlined"><wa-icon slot="prefix" name="phone"></wa-icon>Phone</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-neutral">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-success">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-danger">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-callout wa-warning">GA</div>
|
||||
<div class="wa-split">
|
||||
<div class="wa-gap-0 wa-stack">
|
||||
<span class="wa-heading-xs">Graph API</span>
|
||||
<span class="wa-caption-m">16 Members</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis-vertical" label="actions"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
7
docs/docs/patterns/app/index.njk
Normal file
7
docs/docs/patterns/app/index.njk
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: App
|
||||
description: TODO
|
||||
layout: overview
|
||||
categories: ["app"]
|
||||
listChildren: true
|
||||
---
|
||||
369
docs/docs/patterns/app/leaderboard.md
Normal file
369
docs/docs/patterns/app/leaderboard.md
Normal file
@@ -0,0 +1,369 @@
|
||||
---
|
||||
title: Leaderboard
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-stack wa-gap-xs" style="max-width: 960px; margin: 0 auto">
|
||||
<h2>Collective Activity for Yesterday</h2>
|
||||
<div class="wa-grid">
|
||||
<wa-callout>
|
||||
<wa-icon slot="icon" name="book"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Studied</div>
|
||||
<div class="wa-heading-2xl">482,813</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="medal"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Mastered</div>
|
||||
<div class="wa-heading-2xl">67,106</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="plus"></wa-icon>
|
||||
<div class="wa-stack wa-gap-0">
|
||||
<div class="wa-heading-xs">Items Created</div>
|
||||
<div class="wa-heading-2xl">2,080</div>
|
||||
</div>
|
||||
</wa-callout>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="wa-grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header" class="wa-flank">
|
||||
<wa-icon name="trophy"></wa-icon>
|
||||
<span class="wa-gap-0 wa-stack">
|
||||
<h4>Study Leaders</h4>
|
||||
<p>items mastered last 7 days</p>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1620428268482-cf1851a36764?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1639628735078-ed2f038a193e?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-flank">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?q=80&w=40&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width="40" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<span>mitsuwo</span>
|
||||
<span>2,753</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</wa-card>
|
||||
<!-- -->
|
||||
<wa-card with-header>
|
||||
<div slot="header" class="wa-flank">
|
||||
<wa-icon name="trophy"></wa-icon>
|
||||
<span class="wa-gap-0 wa-stack">
|
||||
<h4>Creation Leaders</h4>
|
||||
<p>items created last 7 days</p>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<ol>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<p>Item 1</p>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
### Two Column
|
||||
```html{.example}
|
||||
<div style="max-width: 960px; margin: 0 auto">
|
||||
<h2>WTA Rankings</h2>
|
||||
<div class="wa-grid wa-gap-3xl">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/serena-2.jpg" />
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<span class="wa-heading-m">Serena Williams</span>
|
||||
<span class="wa-caption-l">United States</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-heading-l">SINGLES</span>
|
||||
<ol class="wa-stack wa-gap-2xs">
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Williams, Serena</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Williams, Serena</span>
|
||||
<span>6960</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Li, Na</span>
|
||||
<span>6785</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Halep, Simona</span>
|
||||
<span>6070</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Radwanska, Agnieszka</span>
|
||||
<span>5130</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Sharapova, Maria</span>
|
||||
<span>4661</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Bouchard, Eugenie</span>
|
||||
<span>4460</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Kerber, Angelique</span>
|
||||
<span>4365</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Jankovic, Jelena</span>
|
||||
<span>3900</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Azarenka, Victoria</span>
|
||||
<span>3812</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster">
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/roberta.jpg" />
|
||||
</div>
|
||||
<div class="wa-border-radius-l wa-frame">
|
||||
<img src="https://uploads.webawesome.com/sara.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="wa-heading-l">DOUBLES</span>
|
||||
<ol class="wa-stack wa-gap-2xs">
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Errani, Vinci</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Roberts, Paxson</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Smith, Wexler</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Elena, Hisieh</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Pen, Sania</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Makarova, Cara</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Washington, Roosevelt</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>King, Little</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Grier, Brown</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</li>
|
||||
<li>
|
||||
<div class="wa-split">
|
||||
<span>Burkhart, Silverton</span>
|
||||
<span>9231</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
44
docs/docs/patterns/app/pagination.md
Normal file
44
docs/docs/patterns/app/pagination.md
Normal file
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Pagination
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
## Simple Pagination
|
||||
|
||||
```html{.example}
|
||||
<div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-l">Showing 1 to 10 of 50 Results</span>
|
||||
<span>
|
||||
<wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
|
||||
<wa-button><wa-icon slot="suffix" name="gear" variant="solid"></wa-icon>Next </wa-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Multi Page
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack" style="opacity: 25%;">
|
||||
<div>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar label="User avatar"></wa-avatar>
|
||||
<div>
|
||||
Some stuff
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-button><wa-icon slot="prefix" name="gear" variant="solid"></wa-icon> Prev</wa-button>
|
||||
<wa-button><wa-icon slot="suffix" name="gear" variant="solid"></wa-icon>Next </wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
```
|
||||
137
docs/docs/patterns/app/pricing.md
Normal file
137
docs/docs/patterns/app/pricing.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Pricing
|
||||
description: TODO
|
||||
parent: app
|
||||
tags: app
|
||||
---
|
||||
|
||||
```html{.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Basic Reporting and Analytics</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">10 Individual users</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">20GB of data for user</span>
|
||||
</div>
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Basic Chat and email</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
<span class="wa-split">
|
||||
<span class="wa-heading-s">Plan</span>
|
||||
<wa-badge appearance="filled outlined" variant="success" pill>Most Popular</wa-badge>
|
||||
</span>
|
||||
<span class="wa-flank wa-gap-2xs">
|
||||
<span class="wa-heading-2xl">$10</span>
|
||||
<span class="wa-caption-l">per user/per month</span>
|
||||
</span>
|
||||
<p class="wa-caption-l">Basic Features</p>
|
||||
<span class="wa-grid">
|
||||
<wa-button>Get Started</wa-button>
|
||||
<wa-button appearance="outlined">Talk to sales</wa-button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<p class="wa-heading-s">Features</p>
|
||||
<p class="wa-caption-m">Everything in out free plan plus</p>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-flank">
|
||||
<wa-icon name="check"></wa-icon>
|
||||
<span class="wa-caption-m">Access to basic features</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
```
|
||||
```html{.example}
|
||||
<div class="wa-callout wa-neutral wa-outlined wa-grid">
|
||||
<div class="wa-stack">
|
||||
<h2 class="wa-heading-l">Lifetime membership</h2>
|
||||
<p>Lorem ipsum dolor sit amet consect etur adipisicing elit. Itaque amet indis perferendis blanditiis repellendus etur quidem assumenda.</p>
|
||||
<wa-divider></wa-divider>
|
||||
<h3 class="wa-heading-s">What's included</h3>
|
||||
<div class="wa-grid">
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Private forum access</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Entry to annual conference</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Member resources</p></span>
|
||||
<span class="wa-flank wa-gap-xs"><wa-icon name="check"></wa-icon><p class="wa-caption-m">Official member t-shirt</p></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-callout wa-neutral wa-stack wa-align-items-center">
|
||||
<h3 class="wa-heading-s">Pay once, own it forever</h3>
|
||||
<div>
|
||||
<span class="wa-heading-3xl">$349</span>
|
||||
<span>USD</span>
|
||||
</div>
|
||||
<wa-button variant="success">Get Access</wa-button>
|
||||
<p class="wa-caption-s">Invoices and receipts available for easy company reimbursement</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### With templates
|
||||
|
||||
### With recommendations grid
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user