mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Add Shoelace theme (#173)
* initial progress * touch up classic theme * finalize theming index * revise themes doc --------- Co-authored-by: konnorrogers <konnor5456@gmail.com>
This commit is contained in:
Lindsay M
@@ -32,7 +32,6 @@
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/themes/color_standard.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
|
||||
@@ -218,6 +218,9 @@
|
||||
{# Theming #}
|
||||
<h2>Theming</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/theming/">Theming Overview</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/color">Color</a>
|
||||
</li>
|
||||
|
||||
6
docs/_includes/svgs/theming/borders.njk
Normal file
6
docs/_includes/svgs/theming/borders.njk
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="64" height="49" viewBox="0 0 64 49" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="0.5" y1="0.5" x2="63.5" y2="0.5" stroke="var(--wa-color-neutral-border-normal)" stroke-linecap="round"/>
|
||||
<line x1="1" y1="16" x2="63" y2="16" stroke="var(--wa-color-neutral-border-normal)" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="2" y1="31" x2="62" y2="31" stroke="var(--wa-color-neutral-border-normal)" stroke-width="4" stroke-linecap="round"/>
|
||||
<line x1="3" y1="46" x2="61" y2="46" stroke="var(--wa-color-neutral-border-normal)" stroke-width="6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 596 B |
8
docs/_includes/svgs/theming/color.njk
Normal file
8
docs/_includes/svgs/theming/color.njk
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<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="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>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
10
docs/_includes/svgs/theming/component-groups.njk
Normal file
10
docs/_includes/svgs/theming/component-groups.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="80" height="37" viewBox="0 0 80 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="26" width="28" height="16" rx="8" fill="var(--wa-color-brand-fill-loud)"/>
|
||||
<circle cx="46" cy="8" r="4" fill="var(--wa-color-surface-default)"/>
|
||||
<circle cx="72" cy="8" r="7" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-brand-fill-loud)" stroke-width="2"/>
|
||||
<circle cx="72" cy="8" r="4" fill="var(--wa-color-brand-fill-loud)"/>
|
||||
<path d="M0 3C0 1.34315 1.34315 0 3 0H13C14.6569 0 16 1.34315 16 3V13C16 14.6569 14.6569 16 13 16H3C1.34315 16 0 14.6569 0 13V3Z" fill="var(--wa-color-brand-fill-loud)"/>
|
||||
<path d="M12.5977 4.65234C12.877 4.91016 12.877 5.36133 12.5977 5.61914L7.09766 11.1191C6.83984 11.3984 6.38867 11.3984 6.13086 11.1191L3.38086 8.36914C3.10156 8.11133 3.10156 7.66016 3.38086 7.40234C3.63867 7.12305 4.08984 7.12305 4.34766 7.40234L6.625 9.6582L11.6309 4.65234C11.8887 4.37305 12.3398 4.37305 12.5977 4.65234Z" fill="var(--wa-color-brand-on-loud)"/>
|
||||
<rect y="24" width="80" height="8" rx="4" fill="var(--wa-color-neutral-fill-normal)"/>
|
||||
<rect x="49" y="20" width="16" height="16" rx="8" fill="var(--wa-color-brand-fill-loud)" stroke="var(--wa-color-surface-default)" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
5
docs/_includes/svgs/theming/focus.njk
Normal file
5
docs/_includes/svgs/theming/focus.njk
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="76" height="44" viewBox="0 0 76 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 12C6 8.68629 8.68629 6 12 6H64C67.3137 6 70 8.68629 70 12V32C70 35.3137 67.3137 38 64 38H12C8.68629 38 6 35.3137 6 32V12Z" fill="var(--wa-color-neutral-fill-normal)"/>
|
||||
<path d="M18.375 19.125C18.375 18.4414 18.9219 17.875 19.625 17.875H21.5C23.2188 17.875 24.625 19.2812 24.625 21C24.625 22.7383 23.2188 24.125 21.5 24.125H19.625V26C19.625 26.3516 19.332 26.625 19 26.625C18.6484 26.625 18.375 26.3516 18.375 26V23.5V19.125ZM19.625 22.875H21.5C22.5352 22.875 23.375 22.0352 23.375 21C23.375 19.9648 22.5352 19.125 21.5 19.125H19.625V22.875ZM27.875 17.875H30.0625C31.6055 17.875 32.875 19.1445 32.875 20.6875C32.875 21.8789 32.1328 22.8945 31.1172 23.3047L32.7578 25.6484C32.9531 25.9414 32.875 26.332 32.6016 26.5273C32.3086 26.7227 31.918 26.6445 31.7227 26.3711L29.7305 23.5H27.875V26C27.875 26.3516 27.582 26.625 27.25 26.625C26.8984 26.625 26.625 26.3516 26.625 26V22.875V19.125C26.625 18.4414 27.1719 17.875 27.875 17.875ZM30.0625 22.25C30.9219 22.25 31.625 21.5664 31.625 20.6875C31.625 19.8281 30.9219 19.125 30.0625 19.125H27.875V22.25H30.0625ZM36.125 17.875H40.5C40.832 17.875 41.125 18.168 41.125 18.5C41.125 18.8516 40.832 19.125 40.5 19.125H36.125V21.625H39.25C39.582 21.625 39.875 21.918 39.875 22.25C39.875 22.6016 39.582 22.875 39.25 22.875H36.125V25.375H40.5C40.832 25.375 41.125 25.668 41.125 26C41.125 26.3516 40.832 26.625 40.5 26.625H36.125C35.4219 26.625 34.875 26.0781 34.875 25.375V22.25V19.125C34.875 18.4414 35.4219 17.875 36.125 17.875ZM45.0586 19.3203C44.668 19.4766 44.4531 19.75 44.3945 20.082C44.3359 20.3555 44.375 20.5312 44.4336 20.668C44.4922 20.7852 44.5898 20.9023 44.7461 21.0195C45.1367 21.293 45.7031 21.4492 46.4062 21.6641C46.4258 21.6641 46.4453 21.6641 46.4648 21.6836C47.1094 21.8594 47.8711 22.0742 48.4375 22.4648C48.75 22.6797 49.0234 22.9727 49.1992 23.3438C49.375 23.7344 49.4141 24.1641 49.3164 24.6523C49.1797 25.4727 48.6328 26.0391 47.9297 26.3516C47.2266 26.6445 46.3672 26.7031 45.5078 26.5664C45.0391 26.4883 44.2773 26.2344 43.7891 26.0586C43.6914 26.0391 43.6133 26 43.5352 25.9805C43.2227 25.8633 43.0469 25.5117 43.1445 25.1797C43.2617 24.8672 43.6133 24.6914 43.9453 24.7891C44.043 24.8281 44.1406 24.8477 44.2578 24.8867C44.7461 25.0625 45.3516 25.2773 45.7031 25.3359C46.4258 25.4336 47.0117 25.375 47.4219 25.1992C47.832 25.0234 48.0273 24.7695 48.0859 24.4375C48.1445 24.1641 48.1055 23.9688 48.0469 23.8516C48.0078 23.7344 47.8906 23.6172 47.7344 23.5C47.3438 23.2266 46.7773 23.0703 46.0742 22.8555C46.0547 22.8555 46.0352 22.8555 46.0156 22.8359C45.3711 22.6602 44.6094 22.4453 44.043 22.0547C43.7305 21.8398 43.457 21.5469 43.2812 21.1758C43.125 20.7852 43.0859 20.3555 43.1641 19.8672L43.7695 19.9844L43.1641 19.8672C43.3008 19.0469 43.8477 18.4805 44.5508 18.168C45.2539 17.875 46.1133 17.8164 46.9727 17.9531C47.2266 17.9922 48.0078 18.1484 48.2812 18.2266C48.6133 18.3047 48.8086 18.6562 48.7109 18.9883C48.6328 19.3203 48.2812 19.5156 47.9492 19.418C47.7344 19.3594 47.0117 19.2227 46.7773 19.1836L46.875 18.5781L46.7773 19.1836C46.0547 19.0859 45.4688 19.1445 45.0586 19.3203ZM53.3086 19.3203C52.918 19.4766 52.7031 19.75 52.6445 20.082C52.5859 20.3555 52.625 20.5312 52.6836 20.668C52.7422 20.7852 52.8398 20.9023 52.9961 21.0195C53.3867 21.293 53.9531 21.4492 54.6562 21.6641C54.6758 21.6641 54.6953 21.6641 54.7148 21.6836C55.3594 21.8594 56.1211 22.0742 56.6875 22.4648C57 22.6797 57.2734 22.9727 57.4492 23.3438C57.625 23.7344 57.6641 24.1641 57.5664 24.6523C57.4297 25.4727 56.8828 26.0391 56.1797 26.3516C55.4766 26.6445 54.6172 26.7031 53.7578 26.5664C53.2891 26.4883 52.5273 26.2344 52.0391 26.0586C51.9414 26.0391 51.8633 26 51.7852 25.9805C51.4727 25.8633 51.2969 25.5117 51.3945 25.1797C51.5117 24.8672 51.8633 24.6914 52.1953 24.7891C52.293 24.8281 52.3906 24.8477 52.5078 24.8867C52.9961 25.0625 53.6016 25.2773 53.9531 25.3359C54.6758 25.4336 55.2617 25.375 55.6719 25.1992C56.082 25.0234 56.2773 24.7695 56.3359 24.4375C56.3945 24.1641 56.3555 23.9688 56.2969 23.8516C56.2578 23.7344 56.1406 23.6172 55.9844 23.5C55.5938 23.2266 55.0273 23.0703 54.3242 22.8555C54.3047 22.8555 54.2852 22.8555 54.2656 22.8359C53.6211 22.6602 52.8594 22.4453 52.293 22.0547C51.9805 21.8398 51.707 21.5469 51.5312 21.1758C51.375 20.7852 51.3359 20.3555 51.4141 19.8672L52.0195 19.9844L51.4141 19.8672C51.5508 19.0469 52.0977 18.4805 52.8008 18.168C53.5039 17.875 54.3633 17.8164 55.2227 17.9531C55.4766 17.9922 56.2578 18.1484 56.5312 18.2266C56.8633 18.3047 57.0586 18.6562 56.9609 18.9883C56.8828 19.3203 56.5312 19.5156 56.1992 19.418C55.9844 19.3594 55.2617 19.2227 55.0273 19.1836L55.125 18.5781L55.0273 19.1836C54.3047 19.0859 53.7188 19.1445 53.3086 19.3203Z" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<rect x="2" y="2" width="72" height="40" rx="10" stroke="var(--wa-color-focus)" stroke-width="4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
4
docs/_includes/svgs/theming/shadows.njk
Normal file
4
docs/_includes/svgs/theming/shadows.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8 20C8 13.3726 13.3726 8 20 8H44C50.6274 8 56 13.3726 56 20V44C56 50.6274 50.6274 56 44 56H20C13.3726 56 8 50.6274 8 44V20Z" fill="var(--wa-color-shadow)"/>
|
||||
<path d="M12 1H36C42.0751 1 47 5.92487 47 12V36C47 42.0751 42.0751 47 36 47H12C5.92487 47 1 42.0751 1 36V12C1 5.92487 5.92487 1 12 1Z" fill="var(--wa-color-surface-default)" stroke="var(--wa-color-surface-border)" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
11
docs/_includes/svgs/theming/space.njk
Normal file
11
docs/_includes/svgs/theming/space.njk
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="32" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<circle cx="4" cy="8" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<circle cx="4" cy="56" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<circle cx="44" cy="32" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<circle cx="28" cy="8" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<circle cx="60" cy="56" r="4" fill="var(--wa-color-neutral-on-normal)"/>
|
||||
<rect x="8" y="24" width="32" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
|
||||
<rect x="8" width="16" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
|
||||
<rect x="8" y="48" width="48" height="16" fill="var(--wa-color-neutral-fill-normal)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 790 B |
6
docs/_includes/svgs/theming/transitions.njk
Normal file
6
docs/_includes/svgs/theming/transitions.njk
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="50" height="37" viewBox="0 0 50 37" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="48" y1="7.15686" x2="2" y2="7.15686" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M6.65685 1.50001L1 7.15686L6.65685 12.8137" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<line x1="2" y1="29.8431" x2="48" y2="29.8431" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M43.3431 35.5L49 29.8431L43.3431 24.1863" stroke="var(--wa-color-neutral-border-loud)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 697 B |
4
docs/_includes/svgs/theming/typography.njk
Normal file
4
docs/_includes/svgs/theming/typography.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="64" height="40" viewBox="0 0 64 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M34.306 35.1952C34.5982 35.8965 34.7735 36.4809 34.7735 36.9484C34.7735 38.5848 33.4293 39.929 31.7345 39.929C30.3319 39.929 29.3968 39.1693 28.8123 37.7666L26.4162 32.3314H8.24045L5.96118 37.7666C5.43519 39.1693 4.44166 39.929 3.03903 39.929C1.34419 39.929 0 38.5848 0 36.9484C0 36.4809 0.116886 35.8965 0.467543 35.1952L14.4354 2.17491C15.0198 0.772281 16.0134 0.0709686 17.3575 0.0709686C18.7602 0.0709686 19.7537 0.772281 20.3381 2.17491L34.306 35.1952ZM17.3575 9.12962L10.4028 27.0716H24.1954L17.3575 9.12962Z" fill="var(--wa-color-neutral-border-loud)"/>
|
||||
<path d="M52.1945 9.94782C59.6168 9.94782 64 14.3895 64 21.9286V36.8316C64 38.6433 62.7143 39.929 60.961 39.929C59.2077 39.929 57.9219 38.5848 57.9219 36.8316V36.4809C55.818 38.7017 52.779 39.929 49.0971 39.929C43.1359 39.929 39.1033 36.5978 39.1033 31.6301C39.1033 26.604 43.1943 23.4481 49.6815 23.4481H57.805V21.578C57.805 17.6623 55.5842 15.4414 51.6685 15.4414C49.2724 15.4414 47.11 16.3181 45.2983 18.1298C44.5385 18.7727 43.8956 19.0649 43.1943 19.0649C41.7333 19.0649 40.506 17.8376 40.506 16.4934C40.506 15.6168 40.915 14.7986 41.7333 13.9804C44.1879 11.4089 47.9866 9.94782 52.1945 9.94782ZM50.3828 35.1952C54.5323 35.1952 57.805 32.2146 57.805 28.4158V27.8898H50.4412C47.11 27.8898 45.3567 29.1171 45.3567 31.3964C45.3567 33.7341 47.3438 35.1952 50.3828 35.1952Z" fill="var(--wa-color-neutral-border-loud)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -222,6 +222,64 @@ wa-page > main {
|
||||
}
|
||||
}
|
||||
|
||||
/* Index Pages */
|
||||
wa-page > main:has(> .index-grid) {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.index-summary {
|
||||
max-inline-size: 80ch;
|
||||
}
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-category {
|
||||
grid-column: 1 / -1;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
background-color: transparent;
|
||||
|
||||
@@ -5,58 +5,14 @@ layout: page-outline
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-page > main {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
.index-category {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--wa-space-2xl);
|
||||
}
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
width: 100%;
|
||||
}
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .component-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: calc(6rem + var(--spacing));
|
||||
}
|
||||
wa-card#drawer-card::part(header) {
|
||||
--spacing: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
wa-card .component-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
</style>
|
||||
|
||||
<p style="max-width: 80ch">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
|
||||
<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
|
||||
|
||||
<div class="index-grid">
|
||||
<h2 class="index-category">Actions</h2>
|
||||
@@ -65,7 +21,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/button.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Button</span>
|
||||
<span class="page-name">Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/button-group">
|
||||
@@ -73,7 +29,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/button-group.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Button Group</span>
|
||||
<span class="page-name">Button Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/copy-button">
|
||||
@@ -81,7 +37,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/copy-button.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Copy Button</span>
|
||||
<span class="page-name">Copy Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dropdown">
|
||||
@@ -89,7 +45,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/dropdown.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Dropdown</span>
|
||||
<span class="page-name">Dropdown</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon-button">
|
||||
@@ -97,7 +53,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/icon-button.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Icon Button</span>
|
||||
<span class="page-name">Icon Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/menu">
|
||||
@@ -105,7 +61,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/menu.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Menu</span>
|
||||
<span class="page-name">Menu</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/qr-code">
|
||||
@@ -113,7 +69,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/qr-code.njk" %}
|
||||
</div>
|
||||
<span class="component-name">QR Code</span>
|
||||
<span class="page-name">QR Code</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -123,7 +79,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/badge.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Badge</span>
|
||||
<span class="page-name">Badge</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/callout">
|
||||
@@ -131,7 +87,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/callout.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Callout</span>
|
||||
<span class="page-name">Callout</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-bar">
|
||||
@@ -139,7 +95,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-bar.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Progress Bar</span>
|
||||
<span class="page-name">Progress Bar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-ring">
|
||||
@@ -147,7 +103,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-ring.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Progress Ring</span>
|
||||
<span class="page-name">Progress Ring</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/skeleton">
|
||||
@@ -155,7 +111,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/skeleton.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Skeleton</span>
|
||||
<span class="page-name">Skeleton</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/spinner">
|
||||
@@ -163,7 +119,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/spinner.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Spinner</span>
|
||||
<span class="page-name">Spinner</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tag">
|
||||
@@ -171,7 +127,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/tag.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Tag</span>
|
||||
<span class="page-name">Tag</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tooltip">
|
||||
@@ -179,7 +135,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/tooltip.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Tooltip</span>
|
||||
<span class="page-name">Tooltip</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -189,7 +145,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/animated-image.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Animated Image</span>
|
||||
<span class="page-name">Animated Image</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/avatar">
|
||||
@@ -197,7 +153,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/avatar.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Avatar</span>
|
||||
<span class="page-name">Avatar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/carousel">
|
||||
@@ -205,7 +161,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/carousel.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Carousel</span>
|
||||
<span class="page-name">Carousel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon">
|
||||
@@ -213,7 +169,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/icon.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Icon</span>
|
||||
<span class="page-name">Icon</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/image-comparer">
|
||||
@@ -221,7 +177,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/image-comparer.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Image Comparer</span>
|
||||
<span class="page-name">Image Comparer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -231,7 +187,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/checkbox.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Checkbox</span>
|
||||
<span class="page-name">Checkbox</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/color-picker">
|
||||
@@ -239,7 +195,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/color-picker.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Color Picker</span>
|
||||
<span class="page-name">Color Picker</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/input">
|
||||
@@ -247,7 +203,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/input.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Input</span>
|
||||
<span class="page-name">Input</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/radio-group">
|
||||
@@ -255,7 +211,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/radio-group.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Radio Group</span>
|
||||
<span class="page-name">Radio Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/range">
|
||||
@@ -263,7 +219,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/range.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Range</span>
|
||||
<span class="page-name">Range</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/rating">
|
||||
@@ -271,7 +227,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/rating.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Rating</span>
|
||||
<span class="page-name">Rating</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/select">
|
||||
@@ -279,7 +235,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/select.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Select</span>
|
||||
<span class="page-name">Select</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/switch">
|
||||
@@ -287,7 +243,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/switch.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Switch</span>
|
||||
<span class="page-name">Switch</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/textarea">
|
||||
@@ -295,7 +251,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/textarea.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Textarea</span>
|
||||
<span class="page-name">Textarea</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -305,7 +261,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/breadcrumb.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Breadcrumb</span>
|
||||
<span class="page-name">Breadcrumb</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tab-group">
|
||||
@@ -313,7 +269,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/tab-group.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Tab Group</span>
|
||||
<span class="page-name">Tab Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tree">
|
||||
@@ -321,7 +277,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/tree.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Tree</span>
|
||||
<span class="page-name">Tree</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -331,7 +287,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/card.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Card</span>
|
||||
<span class="page-name">Card</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/details">
|
||||
@@ -339,7 +295,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/details.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Details</span>
|
||||
<span class="page-name">Details</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dialog">
|
||||
@@ -347,7 +303,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/dialog.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Dialog</span>
|
||||
<span class="page-name">Dialog</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/divider">
|
||||
@@ -355,7 +311,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/divider.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Divider</span>
|
||||
<span class="page-name">Divider</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/drawer">
|
||||
@@ -363,7 +319,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/drawer.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Drawer</span>
|
||||
<span class="page-name">Drawer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/split-panel">
|
||||
@@ -371,7 +327,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/split-panel.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Split Panel</span>
|
||||
<span class="page-name">Split Panel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
@@ -381,7 +337,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/animation.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Animation</span>
|
||||
<span class="page-name">Animation</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-bytes">
|
||||
@@ -389,7 +345,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/format-bytes.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Format Bytes</span>
|
||||
<span class="page-name">Format Bytes</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-date">
|
||||
@@ -397,7 +353,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/format-date.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Format Date</span>
|
||||
<span class="page-name">Format Date</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-number">
|
||||
@@ -405,7 +361,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/format-number.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Format Number</span>
|
||||
<span class="page-name">Format Number</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/include">
|
||||
@@ -413,7 +369,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/include.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Include</span>
|
||||
<span class="page-name">Include</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/mutation-observer">
|
||||
@@ -421,7 +377,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/mutation-observer.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Mutation Observer</span>
|
||||
<span class="page-name">Mutation Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/popup">
|
||||
@@ -429,7 +385,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/popup.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Popup</span>
|
||||
<span class="page-name">Popup</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/relative-time">
|
||||
@@ -437,7 +393,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/relative-time.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Relative Time</span>
|
||||
<span class="page-name">Relative Time</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/resize-observer">
|
||||
@@ -445,7 +401,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/resize-observer.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Resize Observer</span>
|
||||
<span class="page-name">Resize Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/visually-hidden">
|
||||
@@ -453,7 +409,7 @@ layout: page-outline
|
||||
<div slot="header">
|
||||
{% include "svgs/visually-hidden.njk" %}
|
||||
</div>
|
||||
<span class="component-name">Visually Hidden</span>
|
||||
<span class="page-name">Visually Hidden</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
@@ -4,49 +4,64 @@ description: Everything you need to know about theming Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
Web Awesome is designed to be highly customizable through pure CSS. Out of the box, the default theme includes both light and dark styles. Alternatively, you can design your own theme.
|
||||
Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
|
||||
In essence, a theme is a stylesheet that uses the Web Awesome API to define custom properties and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
|
||||
Web Awesome includes two pre-made themes:
|
||||
- **Default** for a clean look that prioritizes accessibility and performance
|
||||
- **Classic** for the look and feel of Shoelace with more accessible color pairings
|
||||
|
||||
:::info
|
||||
For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/dist/themes/*.styles.js`.
|
||||
:::
|
||||
## What's a Theme?
|
||||
|
||||
## Theme Basics
|
||||
Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
All themes are scoped to classes using the format `wa-theme-{name}`, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included theme uses `wa-theme-default-light` and `wa-theme-default-dark` for light and dark styles, respectively. A custom theme called "Purple Power", for example, would use a class called `wa-theme-purple-power`.
|
||||
Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
|
||||
|
||||
All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
|
||||
Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
|
||||
|
||||
Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
|
||||
|
||||
For example, the default theme is set up like this:
|
||||
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-purple-power {
|
||||
/* ... */
|
||||
.wa-theme-default-light {
|
||||
/* all CSS custom properties for color, typography, space, etc. */
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
/* subset of CSS custom properties for color */
|
||||
}
|
||||
```
|
||||
|
||||
In the default theme, all CSS custom properties that make up Web Awesome's theming API, from colors to transitions, are scoped to both `:root` and `wa-theme-default-light`. `wa-theme-default-dark`, on the other hand, only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
|
||||
## Using Themes
|
||||
|
||||
### Activating Themes
|
||||
You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
|
||||
|
||||
To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the default theme with dark styles.
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
|
||||
```
|
||||
|
||||
Or import the **classic** theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/classic.css" />
|
||||
```
|
||||
|
||||
Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
|
||||
```html
|
||||
<html class="wa-theme-default-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/webawesome/dist/themes/default.css" />
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/themes/default.css" />
|
||||
<!-- other links, scripts, and metadata -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
...
|
||||
<!-- page content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
:::info
|
||||
There is one exception to this rule — the default light styles _do not_ need to be activated. For convenience, these styles are scoped to `:root` and will be activated by default when imported.
|
||||
:::
|
||||
|
||||
## Creating Themes
|
||||
|
||||
There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
|
||||
|
||||
74
docs/docs/theming/index.md
Normal file
74
docs/docs/theming/index.md
Normal file
@@ -0,0 +1,74 @@
|
||||
---
|
||||
title: Theming
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<p class="index-summary">A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.</p>
|
||||
|
||||
<div class="index-grid">
|
||||
<a href="/docs/theming/color">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/color.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Color</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/typography">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/typography.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Typography</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/space">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/space.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Space</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/borders">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/borders.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Borders</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/focus">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/focus.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Focus</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/shadows">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/shadows.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Shadows</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/transitions">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/transitions.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Transitions</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/theming/component-groups">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theming/component-groups.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Component Groups</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,20 +1,18 @@
|
||||
@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
|
||||
@import 'classic_components.css';
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-classic-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
* Literal Colors
|
||||
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
|
||||
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedede;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
@@ -63,187 +61,184 @@
|
||||
--wa-color-blue-10: #05202f;
|
||||
--wa-color-blue-05: #04121b;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e5e6e7;
|
||||
--wa-color-gray-80: #c8c9cd;
|
||||
--wa-color-gray-70: #acafb4;
|
||||
--wa-color-gray-60: #8f95a0;
|
||||
--wa-color-gray-50: #6e7482;
|
||||
--wa-color-gray-40: #4f5967;
|
||||
--wa-color-gray-30: #3c4655;
|
||||
--wa-color-gray-20: #293240;
|
||||
--wa-color-gray-10: #171d2c;
|
||||
--wa-color-gray-05: #0d111b;
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-blue-95);
|
||||
--wa-color-primary-90: var(--wa-color-blue-90);
|
||||
--wa-color-primary-80: var(--wa-color-blue-80);
|
||||
--wa-color-primary-70: var(--wa-color-blue-70);
|
||||
--wa-color-primary-60: var(--wa-color-blue-60);
|
||||
--wa-color-primary-50: var(--wa-color-blue-50);
|
||||
--wa-color-primary-40: var(--wa-color-blue-40);
|
||||
--wa-color-primary-30: var(--wa-color-blue-30);
|
||||
--wa-color-primary-20: var(--wa-color-blue-20);
|
||||
--wa-color-primary-10: var(--wa-color-blue-10);
|
||||
--wa-color-primary-05: var(--wa-color-blue-05);
|
||||
--wa-color-violet-95: #f7efff;
|
||||
--wa-color-violet-90: #efe0ff;
|
||||
--wa-color-violet-80: #dcbdfe;
|
||||
--wa-color-violet-70: #cb9afd;
|
||||
--wa-color-violet-60: #b976f9;
|
||||
--wa-color-violet-50: #9d46ec;
|
||||
--wa-color-violet-40: #7d22cc;
|
||||
--wa-color-violet-30: #631f9c;
|
||||
--wa-color-violet-20: #48176e;
|
||||
--wa-color-violet-10: #2e054e;
|
||||
--wa-color-violet-05: #1d0331;
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e5e5e8;
|
||||
--wa-color-gray-80: #c9c9cc;
|
||||
--wa-color-gray-70: #aeafb1;
|
||||
--wa-color-gray-60: #94959b;
|
||||
--wa-color-gray-50: #72747d;
|
||||
--wa-color-gray-40: #565861;
|
||||
--wa-color-gray-30: #43454d;
|
||||
--wa-color-gray-20: #313134;
|
||||
--wa-color-gray-10: #1d1d20;
|
||||
--wa-color-gray-05: #101113;
|
||||
|
||||
/**
|
||||
* Foundational theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
/* Surfaces are background layers that other content rests on.
|
||||
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-95);
|
||||
--wa-color-surface-border: var(--wa-color-gray-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-10);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
|
||||
--wa-color-text-normal: var(--wa-color-gray-10);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-text-link: var(--wa-color-blue-50);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 8%, transparent);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
|
||||
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
|
||||
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 4%),
|
||||
var(--wa-color-gray-40) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: black 12%;
|
||||
/* Focus color provides the default color of the focus ring for predictable keyboard navigation.
|
||||
* Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as surfaces, fills, borders, and text with varying degrees of emphasis.
|
||||
* Accent colors are the most noticeable against surfaces, whereas subtle colors draw less attention.
|
||||
* Accent colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Subtle colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
|
||||
* Semantic Colors
|
||||
* Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
|
||||
* Within these groups, each color specifies a role -
|
||||
* * Fill for background colors or areas larger than a few pixels
|
||||
* * Border for borders, dividers, and other stroke-like elements
|
||||
* * On for content displayed on a fill with the corresponding attention
|
||||
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-50);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-40);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
|
||||
|
||||
/* The default type scale is roughly based on the Major Second scale (x1.125),
|
||||
* with each value rounded to the nearest whole pixel based on a 16px root font size.
|
||||
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
|
||||
* A multiplier is provided to uniformly increase or decrease all font sizes. */
|
||||
--wa-font-size-multiplier: 1;
|
||||
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
|
||||
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
|
||||
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
|
||||
--wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
|
||||
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
|
||||
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
|
||||
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
|
||||
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
|
||||
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-condensed: 1.2;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-multiplier: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
|
||||
@@ -260,34 +255,23 @@
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
--wa-border-width-multiplier: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-multiplier: 0.25;
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
|
||||
--wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
--wa-border-radius-square: 0px;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
@@ -299,23 +283,62 @@
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
* Shadows
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
--wa-link-decoration-default: underline;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
--wa-shadow-offset-x-multiplier: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-offset-y-multiplier: 0.0625;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-blur-multiplier: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-spread-multiplier: 0;
|
||||
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
|
||||
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
|
||||
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
|
||||
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
|
||||
|
||||
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
|
||||
var(--wa-shadow-spread-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
|
||||
var(--wa-shadow-spread-l) var(--wa-color-shadow);
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-easing: ease;
|
||||
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
* Component Groups
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
@@ -329,7 +352,7 @@
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-height-s: 1.875rem;
|
||||
--wa-form-control-height-m: 2.5rem;
|
||||
@@ -339,12 +362,21 @@
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-panel-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-theme-classic-dark,
|
||||
@@ -352,125 +384,81 @@
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-10);
|
||||
--wa-color-surface-default: var(--wa-color-base-05);
|
||||
--wa-color-surface-lowered: black;
|
||||
--wa-color-surface-border: var(--wa-color-base-20);
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-05);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
--wa-color-text-normal: var(--wa-color-gray-80);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-blue-70);
|
||||
|
||||
--wa-color-focus: var(--wa-color-primary-70);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 32% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-20);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-40);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-on-loud: var(--wa-color-gray-10);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-70);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-on-loud: var(--wa-color-gray-10);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-loud: var(--wa-color-gray-10);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-loud: var(--wa-color-gray-10);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
height: 70rem;
|
||||
background: linear-gradient(174deg, var(--wa-color-brand-fill-normal) 0 70%, transparent 70% 100%);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/themer/classic/hero.png) 0px 0px no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 1200px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 45rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
color: var(--wa-color-brand-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/themer/classic/hero.png) 50px -170px no-repeat;
|
||||
height: 900px;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-inline-start: 55%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -1,51 +1,13 @@
|
||||
/* #region Alerts */
|
||||
wa-alert {
|
||||
--background: var(--wa-color-surface-default);
|
||||
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--padding: var(--wa-space-l);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-neutral-border-quiet)
|
||||
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
||||
--icon-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-neutral-border-quiet)
|
||||
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
||||
--icon-color: var(--wa-color-success-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-neutral-border-quiet)
|
||||
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
||||
--icon-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-neutral-border-quiet)
|
||||
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
||||
--icon-color: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-neutral-border-quiet)
|
||||
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
||||
--icon-color: var(--wa-color-danger-fill-loud);
|
||||
}
|
||||
/* #region Avatars */
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--content-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Breadcrumbs */
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* #region Buttons */
|
||||
wa-button {
|
||||
wa-button,
|
||||
wa-radio-button {
|
||||
&[size='small'] {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
@@ -58,23 +20,135 @@ wa-button {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--label-color-active: var(--label-color-hover);
|
||||
--label-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
}
|
||||
|
||||
wa-radio-button[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--label-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Breadcrumbs */
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* #region Callouts */
|
||||
wa-callout {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
--content-color: var(--wa-color-text-normal);
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-success-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-danger-fill-loud);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Cards */
|
||||
wa-card {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Carousel */
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Modals */
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Inputs */
|
||||
wa-input:not([filled]) {
|
||||
wa-input:not([filled]),
|
||||
wa-select:not([filled]),
|
||||
wa-textarea:not([filled]) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
--background-color-checked: var(--border-color-checked);
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-range {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border-color: var(--background);
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-checked);
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Progress Indicators */
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Tabs */
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
Reference in New Issue
Block a user