mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
2136fed4cb
As we move towards using these helpers more widely, `--label-color` doesn't quite make sense
94 KiB
94 KiB
meta, title, layout, hasOutline
| meta | title | layout | hasOutline |
|---|---|---|---|
| Themer | page | false |
Default
Font Awesome
Premium
Playful
Brutalist
Migration
Glassy
Active
Classic
Give us an SVG of the iconic part of your logo, and we’ll give you favicons, app icons, and branded navigation.
Browse Icons
Browse icons
It's dangerous to go alone. Take these!
StandardClassic
Bright
Elegant
Natural
Rudimentary
Anodized
Headings
* Default
Assistant
Inter
Lora
Noto Sans
Noto Sans Display
Noto Sans Mono
Noto Serif
Open Sans
Playfair
Playfair Display
Quicksand
Roboto Flex
Roboto Mono
Roboto Serif
Roboto Slab
Body text
* Default
Assistant
Inter
Lora
Noto Sans
Noto Sans Mono
Noto Serif
Open Sans
Playfair
Quicksand
Roboto Flex
Roboto Mono
Roboto Serif
Roboto Slab
Font Awesome Classic
Font Awesome Sharp
* Custom
Solid PRO
Regular PRO
Light PRO
Thin PRO
Duotone PRO
Solid
Dashed
Dotted
Double
Solid
Regular
projectLogo.replaceWith(element);
logoSelector.value = "";
event.currentTarget.closest("wa-dialog").open = false;
})
// Pre-generated logos
logoSelector.addEventListener('wa-change', event => {
const value = event.currentTarget.value
const projectLogo = previewContainer.querySelector("#project-logo");
let element
element = document.createElement("wa-icon")
element.name = value
element.id = "project-logo"
// Depending on how we plan to store the logos, we can also do
projectLogo.replaceWith(element)
})
// Set pre-generated logos by theme
function setLogoIcons() {
let presetLogoIcons;
switch(themeSelect.value) {
case 'fa':
presetLogoIcons = ['cupcake', 'camera-retro', 'rocket-launch', 'cookie-bite'];
break;
case 'premium':
presetLogoIcons = ['sunglasses', 'crown', 'car', 'shirt'];
break;
case 'playful':
presetLogoIcons = ['face-smile-solid', 'palette', 'crown', 'star'];
break;
case 'brutalist':
presetLogoIcons = ['leaf', 'mug-hot', 'book-open', 'landmark'];
break;
case 'migration':
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
break;
case 'glassy':
presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
break;
case 'active':
presetLogoIcons = ['bicycle', 'bolt', 'pickleball', 'joystick'];
break;
case 'classic':
presetLogoIcons = ['backpack', 'gamepad-modern', 'boombox', 'bug'];
break;
default:
presetLogoIcons = ['shapes', 'meteor', 'cat-space', 'puzzle-piece'];
}
presetLogoOptions.forEach((option, index) => {
const logo = presetLogoIcons[index] ?? 'question';
option.setAttribute('value', logo);
option.querySelector('wa-icon').setAttribute('name', logo);
})
}
themeSelect.addEventListener('wa-change', setLogoIcons);
// Project Name
container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
})
// Heading font weight
resetHeadingFontWeightValue()
fontWeightHeading.addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
});
// Heading text
fontFamilyHeading.addEventListener('wa-change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
fontFamily = `'Assistant', sans-serif`;
break;
case 'inter':
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`;
break;
case 'mulish':
fontFamily = `'Mulish', sans-serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
case 'noto-sans-display':
fontFamily = `'Noto Sans Display', sans-serif`;
break;
case 'noto-sans-mono':
fontFamily = `'Noto Sans Mono', monospace`;
break;
case 'noto-serif':
fontFamily = `'Noto Serif', serif`;
break;
case 'open-sans':
fontFamily = `'Open Sans', sans-serif`;
break;
case 'playfair':
fontFamily = `'Playfair', serif`;
break;
case 'playfair-display':
fontFamily = `'Playfair Display', serif`;
break;
case 'quicksand':
fontFamily = `'Quicksand', sans-serif`;
break;
case 'roboto-flex':
fontFamily = `'Roboto Flex', sans-serif`;
break;
case 'roboto-mono':
fontFamily = `'Roboto Mono', monospace`;
break;
case 'roboto-serif':
fontFamily = `'Roboto Serif', serif`;
break;
case 'roboto-slab':
fontFamily = `'Roboto Slab', serif`;
break;
default:
fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
}
document.documentElement.style.setProperty('--wa-font-family-heading', fontFamily);
})
// Body text
fontFamilyBody.addEventListener('wa-change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
fontFamily = `'Assistant', sans-serif`;
break;
case 'inter':
fontFamily = `'inter', sans-serif`;
break;
case 'lora':
fontFamily = `'Lora', serif`;
break;
case 'mulish':
fontFamily = `'Mulish', sans-serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
case 'noto-sans-mono':
fontFamily = `'Noto Sans Mono', monospace`;
break;
case 'noto-serif':
fontFamily = `'Noto Serif', serif`;
break;
case 'open-sans':
fontFamily = `'Open Sans', sans-serif`;
break;
case 'playfair':
fontFamily = `'Playfair', serif`;
break;
case 'quicksand':
fontFamily = `'Quicksand', sans-serif`;
break;
case 'roboto-flex':
fontFamily = `'Roboto Flex', sans-serif`;
break;
case 'roboto-mono':
fontFamily = `'Roboto Mono', monospace`;
break;
case 'roboto-serif':
fontFamily = `'Roboto Serif', serif`;
break;
case 'roboto-slab':
fontFamily = `'Roboto Slab', serif`;
break;
default:
fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
}
document.documentElement.style.setProperty('--wa-font-family-body', fontFamily);
});
// Body font weight
resetBodyFontWeightValue()
fontWeightBody.addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
});
// Icons
import { registerIconLibrary } from '/dist/webawesome.js';
// Ensure regular icons are always available for the knobs
registerIconLibrary('fa-classic-regular', {
resolver: name => `https://ka-f.fontawesome.com/releases/v6.5.1/svgs/regular/${name}.svg`
});
function solidifyRatingStars() {
const ratings = document.querySelectorAll('wa-rating');
ratings.forEach(rating => rating.getSymbol = () => '');
}
function showIconStyleOptions() {
function hide(elem) {
elem.setAttribute('hidden', true);
}
function show(elem) {
elem.removeAttribute('hidden');
}
switch(iconFamily.value) {
case 'fa-classic':
show(iconStyle);
show(iconStyle.querySelector('[value="duotone"]'));
hide(iconStyle.querySelector('[value="solid"] > wa-badge'));
break;
case 'fa-sharp':
show(iconStyle);
hide(iconStyle.querySelector('[value="duotone"]'));
show(iconStyle.querySelector('[value="solid"] > wa-badge'));
break;
default:
hide(iconStyle);
}
}
function setPreferredIcons() {
switch(themeSelect.value) {
case 'fa':
iconFamily.value = 'fa-classic';
iconStyle.value = 'solid';
useFaIcons();
break;
case 'premium':
iconFamily.value = 'custom';
registerIconLibrary('default', {
resolver: name => `/assets/icons/chunk/${name}.svg`,
mutator: svg => {[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));}
});
registerIconLibrary('system', {
resolver: name => `/assets/icons/chunk/${name}.svg`,
mutator: svg => {[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));}
});
break;
case 'playful':
iconFamily.value = 'custom';
registerIconLibrary('default', {
resolver: name => `/assets/icons/jelly/${name}.svg`,
mutator: svg => {[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));}
});
registerIconLibrary('system', {
resolver: name => `/assets/icons/jelly/${name}.svg`,
mutator: svg => {[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));}
});
break;
case 'brutalist':
iconFamily.value = 'custom';
registerIconLibrary('default', {
resolver: name => `/assets/icons/utility/${name}.svg`,
mutator: svg => {
[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));
[...svg.querySelectorAll('[stroke="black"]')].map(el => el.setAttribute('stroke', 'currentColor'));
}
});
registerIconLibrary('system', {
resolver: name => `/assets/icons/utility/${name}.svg`,
mutator: svg => {
[...svg.querySelectorAll('[fill="black"]')].map(el => el.setAttribute('fill', 'currentColor'));
[...svg.querySelectorAll('[stroke="black"]')].map(el => el.setAttribute('stroke', 'currentColor'));
}
});
break;
case 'migration':
iconFamily.value = 'fa-classic';
iconStyle.value = 'solid';
useFaIcons();
break;
case 'classic':
iconFamily.value = 'custom';
registerIconLibrary('default', {
resolver: name => `/assets/icons/bootstrap/${name}.svg`,
});
registerIconLibrary('system', {
resolver: name => `/assets/icons/bootstrap/${name}.svg`,
});
break;
default:
iconFamily.value = 'fa-classic';
iconStyle.value = 'solid';
useFaIcons();
}
}
function useFaIcons() {
let iconLibrary;
if(iconFamily.value === 'fa-sharp') {
switch(iconStyle.value) {
case 'solid':
iconLibrary = 'sharp-solid';
break;
case 'regular':
iconLibrary = 'sharp-regular';
break;
case 'light':
iconLibrary = 'sharp-light';
break;
case 'thin':
iconLibrary = 'sharp-thin';
break;
default:
iconLibrary = 'sharp-solid';
}
// Ensures sharp-solid variations are available for ratings, etc.
registerIconLibrary('always-solid', {
resolver: name => `https://ka-f.fontawesome.com/releases/v6.5.1/svgs/sharp-solid/${name}.svg`
});
solidifyRatingStars();
}
else {
switch(iconStyle.value) {
case 'solid':
iconLibrary = 'solid';
break;
case 'regular':
iconLibrary = 'regular';
break;
case 'light':
iconLibrary = 'light';
break;
case 'thin':
iconLibrary = 'thin';
break;
case 'duotone':
iconLibrary = 'duotone';
break;
default:
iconLibrary = 'solid';
}
// Ensures solid variations are available for radios, ratings, etc.
registerIconLibrary('always-solid', {
resolver: name => `https://ka-f.fontawesome.com/releases/v6.5.1/svgs/solid/${name}.svg`
});
solidifyRatingStars();
}
registerIconLibrary('default', {
resolver: name => `https://ka-f.fontawesome.com/releases/v6.5.1/svgs/${iconLibrary}/${name}.svg`
});
registerIconLibrary('system', {
resolver: name => `https://ka-f.fontawesome.com/releases/v6.5.1/svgs/${iconLibrary}/${name}.svg`
});
};
function syncLogoIcon() {
if (logoSelector.value) {
logoSelector.value = logoSelector.querySelector('[checked]').value;
document.querySelector('#project-logo').setAttribute('name', `${logoSelector.querySelector('[checked]').value}`);
} else {
return;
}
}
// Swaps icons to the preferred set for the selected theme
themeSelect.addEventListener('wa-change', event => {
setPreferredIcons();
showIconStyleOptions();
syncLogoIcon();
const iconChooserTrigger = document.getElementById('icon-chooser-trigger');
const iconChooserTriggerTooltip = document.querySelector('[name="project-logo-selector"] wa-tooltip');
if (iconFamily.value === 'custom') {
iconChooserTrigger.setAttribute('disabled', 'true');
iconChooserTriggerTooltip.textContent = 'Choose a Font Awesome icon family to browse more icons';
}
else {
iconChooserTrigger.removeAttribute('disabled');
iconChooserTriggerTooltip.textContent = 'Browse icons'
}
});
// Changes available Icon Styles and swaps icons based on the selected Icon Family
iconFamily.addEventListener('wa-change', event => {
useFaIcons();
showIconStyleOptions();
});
// Swaps icons based on the selected Icon Style
iconStyle.addEventListener('wa-change', useFaIcons);
// Corners
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
});
// Border width
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
});
// Border style
borderStyle.addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
});
// Spacing style
spacing.addEventListener('wa-input', event => {
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
});
// Form validation
// Mostly useful for the number ranges. Very simple validation on blurs.
function reportValidity(event) {
const element = event.target
if (typeof element?.reportValidity === "function") {
const isValid = element.reportValidity()
element.classList.toggle("wa-invalid", !isValid)
}
}
knobs.querySelectorAll("*").forEach((el) => el.addEventListener("blur", reportValidity))
knobs.querySelectorAll("*").forEach((el) => el.addEventListener("wa-blur", reportValidity))
</script>
<style>
/* Themer layout and cross-theme styles */
html {
background: var(--wa-color-surface-default);
background-attachment: fixed;
background-image: radial-gradient(var(--wa-color-surface-lowered) 1.5px, transparent 0);
background-size: 28px 28px;
background-position: -19px -19px;
min-height: 100vh;
}
/* page layout */
.content {
max-width: none;
margin: 0;
}
.preview-container {
background: var(--wa-color-surface-lowered);
container: preview / inline-size;
padding: 0;
max-inline-size: 1400px;
margin-inline: auto;
border: var(--wa-border-width-s) var(--wa-color-neutral-border-quiet) var(--wa-border-style);
overflow: clip;
}
.overlap {
position: relative;
color: var(--wa-color-text-normal);
z-index: 1;
}
.grid-12-col {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--wa-space-m);
}
/* general and utility */
.strata {
padding: var(--wa-space-3xl) 7%;
}
pre wa-copy-button {
display: none;
}
wa-input::part(input) {
width: 100%;
}
.square-frame,
.landscape-frame {
flex: 1 1 auto;
overflow: hidden;
&:not(wa-card *) {
border-radius: calc(var(--wa-border-radius-m) - var(--wa-panel-border-width));
}
& > img {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
}
}
.square-frame {
aspect-ratio: 1 / 1;
}
.landscape-frame {
aspect-ratio: 16 / 9;
}
/* strata - hero/header */
.project-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.project-header .title {
grid-column-end: col-end;
}
.project-header wa-icon-button {
color: inherit;
font-size: var(--wa-font-size-l);
&:not(:last-of-type) {
margin-right: var(--wa-space-m);
}
}
/* strata product cards */
.products wa-card::part(base) {
height: 100%;
}
.products wa-card::part(body) {
flex-grow: 1;
}
.product-card {
grid-column: span 12;
position: relative;
}
.product-card {
max-width: 45ch;
margin: 0 auto;
}
.product-card .title-rating {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: var(--wa-flow-spacing);
}
.product-card .title {
margin: 0;
}
.product-card p:last-of-type {
margin-bottom: 0;
}
/* strata - blog post */
.blog .column-post-header {
grid-column: span 12;
position: relative;
}
.blog .post-body {
grid-column: span 12;
}
.blog .post-header {
position: sticky;
top: 1rem;
}
.blog .post-title {
margin-top: 0;
line-height: 1.2;
}
.blog .authors {
margin: var(--wa-space-2xl) 0;
}
.blog .authors a {
display: flex;
align-items: center;
gap: var(--wa-space-s);
}
/* strata - message composer */
.message-composer .card-header [slot='header'] {
display: flex;
align-items: center;
}
.message-composer .card-footer [slot='footer'] {
display: flex;
align-items: center;
justify-content: space-between;
}
.message-composer wa-card p {
margin-bottom: 0;
}
.message-composer .card-footer [slot='footer'] .tools {
display: flex;
align-items: center;
}
.message-composer .grouped-buttons:not(:first-of-type) {
padding-inline-start: var(--wa-space-m);
}
.message-composer .grouped-buttons:not(:last-of-type) {
padding-inline-end: var(--wa-space-m);
border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
}
.message-composer wa-card::part(header) {
border-start-start-radius: calc(var(--border-radius) - var(--border-width));
border-start-end-radius: calc(var(--border-radius) - var(--border-width));
}
.message-composer wa-card::part(footer) {
border-end-start-radius: calc(var(--border-radius) - var(--border-width));
border-end-end-radius: calc(var(--border-radius) - var(--border-width));
}
/* strata - product detail */
.product-detail .product-detail-images {
grid-column: span 12;
}
.product-detail .product-detail-info {
grid-column: span 12;
}
.product-detail wa-carousel {
max-width: 350px;
margin: 0 auto;
}
.product-detail .title-rating {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
}
.product-detail .price {
font-size: var(--wa-font-size-xl);
}
.product-detail .price-discounted {
text-decoration: line-through;
color: var(--wa-color-text-quiet);
margin-inline-end: var(--wa-space-m);
}
/* strata - support table */
.support-table {
font-size: var(--wa-font-size-s);
}
.support-table th {
padding: var(--wa-space-l);
}
.support-table td {
padding: var(--wa-space-m) var(--wa-space-l);
}
.support-table .desc {
max-width: 30ch;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.support-table .excerpt {
color: var(--wa-color-text-quiet);
}
.support-table wa-avatar {
--size: var(--wa-font-size-2xl);
}
.support-table wa-card > * {
border-radius: calc(var(--border-radius) - var(--border-width));
}
/* strata - Checkout Form */
.checkout-form .payment {
grid-column: span 12;
order: 2;
}
.checkout-form .order {
grid-column: span 12;
}
.checkout-form .payment wa-input,
.checkout-form .payment wa-switch {
margin-bottom: var(--wa-space-l);
}
.checkout-form .order-item {
display: grid;
gap: var(--wa-space-xl);
align-items: center;
justify-content: space-between;
margin-bottom: var(--wa-space-xl);
}
.order-item .square-frame {
grid-column: span 2;
}
.order-item .name {
grid-column: span 5;
}
.order-item .finish {
display: block;
}
.order-item wa-input {
grid-column: span 3;
margin: 0;
}
.order-item .price {
grid-column: span 2;
}
/* responsive */
@container preview (min-width: 1040px) {
.product-card {
grid-column: span 4;
}
.blog .column-post-header {
grid-column: 1 / 5;
}
.blog .post-body {
grid-column: 5 / 13;
}
.product-detail .product-detail-images {
grid-column: 1 / 6;
}
.product-detail .product-detail-info {
grid-column: 7 / 13;
}
.checkout-form .payment {
grid-column: 1 / 6;
order: 1;
}
.checkout-form .order {
grid-column: 7 / 13;
order: 2;
}
}
</style>
Project Name
What you know you can't explain, but you feel it.
Free Your Mind
Morpheus
I see it in your eyes. You have the look of a man who accepts what he sees because he is expecting to wake up. Ironically, that's not far from the truth.
Add to Cart
Save
Low Stock
Seraph
The Oracle has many enemies, I had to be sure. You do not truly know someone until you fight them.
Add to Cart
Save
Keymaker
Only the One can open the door. And only during that window can that door be opened.
Add to Cart
Save
Simulacra & Simulation
At an abandoned hotel, a police squad corners Trinity, who overpowers them with superhuman abilities. She flees, pursued by the police and a group of suited Agents capable of similar superhuman feats. She answers a ringing public telephone and vanishes.
Fishburne stated that once he read the script, he did not understand why other people found it confusing. However, he doubted if the movie would ever be made, because it was "so smart." The Wachowskis instructed Fishburne to base his performance on the character Morpheus in Neil Gaiman's Sandman comics.
The New Biology of Machines
The method used for creating these effects involved a technically expanded version of an old art photography technique known as time-slice photography, in which an array of cameras are placed around an object and triggered simultaneously. Each camera captures a still picture, contributing one frame to the video sequence, which creates the effect of "virtual camera movement"; the illusion of a viewpoint moving around an object that appears frozen in time.
For the "real world," the actors' hair was less styled, their clothing had more textile content, and the cinematographers used longer lenses to soften the backgrounds and emphasize the actors.
:host,
.wa-theme-purple-power {
/* ... */
}Ontological Shock
The allegory is related to Plato's theory of Forms, which holds that the true essence of an object is not what we perceive with our senses, but rather its quality, and that most people perceive only the shadow of the object and are thus limited to false perception.
<html class="wa-theme-default-dark">
<head>
<link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" />
</head>
<body>
...
</body>
</html>
Bold
Italic
Strikethrough
Link
Unordered List
Ordered List
Block Quote
Code
Inline Code
You can see it when you look out your window or when you turn on your television. You can feel it when you go to work... when you go to church... when you pay your taxes.
Add File
Formatting
Emojis
Mention
Record Video
Record Audio Clip
Add Magic
Send
The Oracle
$120
$65
It is a pickle, no doubt about it. Bad news is there's no way you can really know if I'm here to help you or not, so it's really up to you. Just have to make up your own damn mind to either accept what I'm going to tell you, or reject it. Candy?
We're all here to do what we're all here to do. I'm interested in one thing, Neo, the future. And believe me, I know: the only way to get there is together.
Matte
Glossy
Pebbled
Holo
Add to Basket
Save
| Check all | Customer | Conversation | Assigned To | Status | Actions |
|---|---|---|---|---|---|
| Completed | Keanu Reeves | Am I dead? Okey dokey... free my mind. Right, no problem, free my mind, free my mind, no problem, right... |
Chad Stahelski | Pending | Action Resolved Pending Re-open Delete |
| Completed | Lawrence Fishburne | We have a rule We never free a mind once it's reached a certain age. It's dangerous, the mind has trouble letting go. |
Char McCoy | Resolved | Action Resolved Pending Re-open Delete |
| Completed | Carrie-Ann Moss | Was it the same cat? A déjà vu is usually a glitch in the Matrix. It happens when they change something. |
Debbie Evans | Pending | Action Resolved Pending Re-open Delete |
| Completed | Joe Pantoliano | Ignorance is bliss Why oh why didn't I take the blue pill? |
Bounced | Action Resolved Pending Re-open Delete | |
| Completed | Hugo Weaving | I'd like to share a revelation I need the codes, I have to get inside Zion and you have to tell me how. |
Dara Prescott | Expired | Action Resolved Pending Re-open Delete |
Payment
United States
Canada
Sign me up for more offers from this store
Pay Now
Order Summary
Apply
Subtotal
$530.00
Shipping
$8.00
Total
$538.00