mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
8 Commits
konnorroge
...
subcompone
| Author | SHA1 | Date | |
|---|---|---|---|
|
b2a9c33ee6 | ||
|
|
d20945d78b | ||
|
|
07327be95e | ||
|
|
b99d7771dc | ||
|
|
10cc9bdc68 | ||
|
|
bc598dad92 | ||
|
|
ff61ac002f | ||
|
|
63ec9d5bc1 |
@@ -20,7 +20,7 @@
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1140">
|
||||
<wa-page view="desktop" disable-navigation-toggle="" mobile-breakpoint="1180">
|
||||
<header slot="header" class="wa-split">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
@@ -46,9 +46,9 @@
|
||||
|
||||
{# Search #}
|
||||
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
Search
|
||||
<kbd slot="suffix" class="wa-desktop-only">/</kbd>
|
||||
<kbd slot="end" class="wa-desktop-only">/</kbd>
|
||||
</wa-button>
|
||||
|
||||
{# Login #}
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
{# Color scheme selector #}
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
|
||||
<wa-option value="light">
|
||||
<wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="sun" variant="regular"></wa-icon>
|
||||
Light
|
||||
</wa-option>
|
||||
<wa-option value="dark">
|
||||
<wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="moon" variant="regular"></wa-icon>
|
||||
Dark
|
||||
</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-option value="auto">
|
||||
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
|
||||
System
|
||||
</wa-option>
|
||||
</wa-select>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{# Preset theme selector #}
|
||||
<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
|
||||
{% for theme in collections.theme | sort %}
|
||||
<wa-option value="{{ theme.page.fileSlug }}">
|
||||
{{ theme.data.title }}
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
aria-haspopup="listbox"
|
||||
aria-activedescendant
|
||||
>
|
||||
<wa-icon slot="prefix" name="search"></wa-icon>
|
||||
<wa-icon slot="start" name="search"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
</div>
|
||||
<span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
|
||||
<wa-button tabindex="-1" variant="brand">
|
||||
<wa-icon slot="prefix" name="shopping-bag"></wa-icon>
|
||||
<wa-icon slot="start" name="shopping-bag"></wa-icon>
|
||||
Checkout
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -62,10 +62,10 @@
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-m">Sign In</h3>
|
||||
<wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
|
||||
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input tabindex="-1" label="Password" type="password">
|
||||
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="lock" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button tabindex="-1" variant="brand">Sign In</wa-button>
|
||||
<a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
|
||||
@@ -244,11 +244,11 @@
|
||||
</div>
|
||||
<div slot="footer" class="wa-grid wa-gap-xs" style="--min-column-size: 10ch;">
|
||||
<wa-button appearance="outlined" tabindex="-1">
|
||||
<wa-icon slot="prefix" name="at"></wa-icon>
|
||||
<wa-icon slot="start" name="at"></wa-icon>
|
||||
Email
|
||||
</wa-button>
|
||||
<wa-button appearance="outlined" tabindex="-1">
|
||||
<wa-icon slot="prefix" name="phone"></wa-icon>
|
||||
<wa-icon slot="start" name="phone"></wa-icon>
|
||||
Phone
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@ layout: page-outline
|
||||
|
||||
<div id="block-filter">
|
||||
<wa-input type="search" placeholder="Search {{ title }}" with-clear autofocus>
|
||||
<wa-icon slot="prefix" name="search"></wa-icon>
|
||||
<wa-icon slot="start" name="search"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
|
||||
<wa-button @click="reset()" appearance="outlined" variant="danger" size="small">
|
||||
<wa-icon slot="prefix" name="circle-xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="circle-xmark" variant="regular"></wa-icon>
|
||||
Reset
|
||||
</wa-button>
|
||||
</wa-callout>
|
||||
|
||||
@@ -24,12 +24,12 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
|
||||
<h4 slot="summary" data-no-anchor data-no-outline id="remix">
|
||||
<wa-icon name="arrows-rotate"></wa-icon>
|
||||
Remix this theme
|
||||
<wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
|
||||
<wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="end" variant="regular"></wa-icon>
|
||||
<wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
|
||||
</h4>
|
||||
|
||||
<wa-select name="palette" label="Color palette" with-clear v-model="theme.palette">
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-icon name="swatchbook" slot="start" variant="regular"></wa-icon>
|
||||
<wa-option v-for="(palette, paletteId) in palettes" :label="palette.title" :value="paletteId === baseTheme.palette ? '' : paletteId">
|
||||
<palette-card :palette="paletteId" size="small">
|
||||
<template #extra>
|
||||
@@ -43,7 +43,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
|
||||
:values="hues"></color-select>
|
||||
|
||||
<wa-select name="colors" class="theme-colors-select" label="Color contrast from…" value="" with-clear v-model="theme.colors">
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-icon name="palette" slot="start" variant="regular"></wa-icon>
|
||||
<template v-for="(themeMeta, themeId) in themes">
|
||||
<wa-option v-if="themeId !== 'custom'" :label="themeMeta.title" :value="themeId === computed.colors ? '' : themeId">
|
||||
<theme-card :theme="themeId" type="colors" :rest="{base: computed.base, palette: computed.palette, brand: computed.brand}" size="small">
|
||||
@@ -56,7 +56,7 @@ if (location.pathname.endsWith('/custom/') && !location.search) {
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" with-clear v-model="theme.typography">
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-icon name="font-case" slot="start"></wa-icon>
|
||||
|
||||
<wa-option v-for="(themeMeta, themeId) in themes" :label="themeMeta.title" :value="themeId === theme.base ? '' : themeId">
|
||||
<fonts-card :theme="themeId" size="small">
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
<nav slot="navigation-header">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<span class="wa-heading-m">radiogaga</span>
|
||||
</div>
|
||||
<wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster">
|
||||
<wa-button appearance="outlined">Log In</wa-button>
|
||||
@@ -28,7 +28,7 @@
|
||||
</header>
|
||||
<div slot="navigation-header" class="wa-split">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%" class="wa-mobile-only">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-split">
|
||||
<h2 class="wa-heading-s">For You</h2>
|
||||
|
||||
@@ -185,11 +185,11 @@ html.wa-theme-brutalist .preview-container {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-card wa-button::part(prefix) {
|
||||
.product-card wa-button::part(start) {
|
||||
padding-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(suffix) {
|
||||
.product-card wa-button::part(end) {
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
|
||||
@@ -141,16 +141,3 @@ One of the most common use cases for badges is attaching them to buttons. To mak
|
||||
<wa-badge variant="danger" pill>6</wa-badge>
|
||||
</wa-button>
|
||||
```
|
||||
|
||||
### With Menu Items
|
||||
|
||||
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
|
||||
|
||||
```html {.example}
|
||||
<wa-dropdown style="max-width: 240px;">
|
||||
<wa-button slot="trigger" caret>Messages</wa-button>
|
||||
<h3>Messages</h3>
|
||||
<wa-dropdown-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-dropdown-item>
|
||||
<wa-dropdown-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
```
|
||||
|
||||
@@ -5,17 +5,4 @@ tags: component
|
||||
parent: breadcrumb
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-breadcrumb>
|
||||
<wa-breadcrumb-item>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Shirts</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [breadcrumb examples](/docs/components/breadcrumb).
|
||||
:::
|
||||
This component must be used as a child of `<wa-breadcrumb>`. Please see the [Breadcrumb docs](/docs/components/breadcrumb) to see examples of this component in action.
|
||||
|
||||
@@ -36,32 +36,20 @@ For websites, you'll probably want to use links instead. You can make any breadc
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
### Prefixes
|
||||
### Start & End Decorations
|
||||
|
||||
Use the `prefix` slot to add content before any breadcrumb item.
|
||||
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to any breadcrumb item.
|
||||
|
||||
```html {.example}
|
||||
<wa-breadcrumb>
|
||||
<wa-breadcrumb-item>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="house"></wa-icon>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
### Suffixes
|
||||
|
||||
Use the `suffix` slot to add content after any breadcrumb item.
|
||||
|
||||
```html {.example}
|
||||
<wa-breadcrumb>
|
||||
<wa-breadcrumb-item>Documents</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Policies</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>
|
||||
Security
|
||||
<wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="tree-palm"></wa-icon>
|
||||
Traveling
|
||||
</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
@@ -99,7 +87,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
|
||||
|
||||
### Custom Colors
|
||||
|
||||
Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
|
||||
Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Content in the `start`, `end`, and `separator` slots can be styled using CSS parts.
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
@@ -112,14 +100,14 @@ Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffi
|
||||
.redcrumbs wa-breadcrumb-item::part(separator) {
|
||||
color: pink;
|
||||
}
|
||||
.redcrumbs wa-breadcrumb-item::part(prefix),
|
||||
.redcrumbs wa-breadcrumb-item::part(suffix) {
|
||||
.redcrumbs wa-breadcrumb-item::part(start),
|
||||
.redcrumbs wa-breadcrumb-item::part(end) {
|
||||
color: currentColor;
|
||||
}
|
||||
</style>
|
||||
<wa-breadcrumb class="redcrumbs">
|
||||
<wa-breadcrumb-item>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
|
||||
@@ -149,7 +137,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
Alternatively, you can place dropdown menus in a prefix or suffix slot.
|
||||
Alternatively, you can place dropdown menus in a `start` or `end` slot.
|
||||
|
||||
```html {.example}
|
||||
<wa-breadcrumb>
|
||||
@@ -158,7 +146,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
|
||||
<wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>
|
||||
Web Design
|
||||
<wa-dropdown slot="suffix">
|
||||
<wa-dropdown slot="end">
|
||||
<wa-button slot="trigger" size="small" appearance="filled" pill>
|
||||
<wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
@@ -50,26 +50,26 @@ and it will override the inherited size,
|
||||
it is rarely a good idea to mix sizes within the same button group.
|
||||
:::
|
||||
|
||||
### Vertical button groups
|
||||
### Vertical Button Groups
|
||||
|
||||
Set the `orientation` attribute to `vertical` to make a vertical button group.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group orientation="vertical" label="Options" style="max-width: 120px;">
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="plus"></wa-icon>
|
||||
<wa-icon slot="start" name="plus"></wa-icon>
|
||||
New
|
||||
</wa-button>
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="folder-open"></wa-icon>
|
||||
<wa-icon slot="start" name="folder-open"></wa-icon>
|
||||
Open
|
||||
</wa-button>
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="save"></wa-icon>
|
||||
<wa-icon slot="start" name="save"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="print"></wa-icon>
|
||||
<wa-icon slot="start" name="print"></wa-icon>
|
||||
Print
|
||||
</wa-button>
|
||||
</wa-button-group>
|
||||
|
||||
@@ -126,60 +126,60 @@ As expected, buttons can be given a custom width by setting the `width` CSS prop
|
||||
<wa-button size="large" style="width: 100%;">Large</wa-button>
|
||||
```
|
||||
|
||||
### Prefix and Suffix Icons
|
||||
### Start & End Decorations
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the button label.
|
||||
|
||||
```html {.example}
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="gear"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="undo"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
|
||||
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="link"></wa-icon>
|
||||
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
|
||||
Open
|
||||
</wa-button>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="gear"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
|
||||
<wa-button>
|
||||
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="undo"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
|
||||
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="link"></wa-icon>
|
||||
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
|
||||
Open
|
||||
</wa-button>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<wa-button size="large">
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="gear"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
|
||||
<wa-button size="large">
|
||||
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="undo"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
|
||||
<wa-button size="large">
|
||||
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
|
||||
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="link"></wa-icon>
|
||||
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
|
||||
Open
|
||||
</wa-button>
|
||||
```
|
||||
|
||||
@@ -6,41 +6,4 @@ parent: carousel
|
||||
icon: carousel-item
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-carousel pagination>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</wa-carousel-item>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</wa-carousel-item>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</wa-carousel-item>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</wa-carousel-item>
|
||||
<wa-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</wa-carousel-item>
|
||||
</wa-carousel>
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [carousel examples](/docs/components/carousel).
|
||||
:::
|
||||
This component must be used as a child of `<wa-carousel>`. Please see the [Carousel docs](/docs/components/carousel) to see examples of this component in action.
|
||||
|
||||
@@ -240,7 +240,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut
|
||||
<wa-dropdown placement="right-start">
|
||||
<wa-button slot="trigger">
|
||||
File formats
|
||||
<wa-icon slot="suffix" name="chevron-right"></wa-icon>
|
||||
<wa-icon slot="end" name="chevron-right"></wa-icon>
|
||||
</wa-button>
|
||||
|
||||
<wa-dropdown-item value="pdf">PDF Document</wa-dropdown-item>
|
||||
|
||||
@@ -109,24 +109,24 @@ The `type` attribute controls the type of input the browser renders.
|
||||
<wa-input type="date" placeholder="Date"></wa-input>
|
||||
```
|
||||
|
||||
### Prefix & Suffix Icons
|
||||
### Start & End Decorations
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the input.
|
||||
|
||||
```html {.example}
|
||||
<wa-input placeholder="Small" size="small">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
<wa-icon name="house" slot="start"></wa-icon>
|
||||
<wa-icon name="comment" slot="end"></wa-icon>
|
||||
</wa-input>
|
||||
<br />
|
||||
<wa-input placeholder="Medium" size="medium">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
<wa-icon name="house" slot="start"></wa-icon>
|
||||
<wa-icon name="comment" slot="end"></wa-icon>
|
||||
</wa-input>
|
||||
<br />
|
||||
<wa-input placeholder="Large" size="large">
|
||||
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
|
||||
<wa-icon name="house" slot="start"></wa-icon>
|
||||
<wa-icon name="comment" slot="end"></wa-icon>
|
||||
</wa-input>
|
||||
```
|
||||
|
||||
|
||||
@@ -6,50 +6,4 @@ parent: select
|
||||
icon: option
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-select label="Select one">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable an option and prevent it from being selected.
|
||||
|
||||
```html {.example}
|
||||
<wa-select label="Select one">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2" disabled>Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
### Prefix & Suffix
|
||||
|
||||
Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
|
||||
|
||||
```html {.example}
|
||||
<wa-select label="Select one">
|
||||
<wa-option value="option-1">
|
||||
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
|
||||
Email
|
||||
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
|
||||
</wa-option>
|
||||
|
||||
<wa-option value="option-2">
|
||||
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
|
||||
Phone
|
||||
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
|
||||
</wa-option>
|
||||
|
||||
<wa-option value="option-3">
|
||||
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
|
||||
Chat
|
||||
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
|
||||
</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
This component must be used as a child of `<wa-select>`. Please see the [Select docs](/docs/components/select) to see examples of this component in action.
|
||||
|
||||
@@ -137,7 +137,7 @@ Use the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_a
|
||||
</wa-popover>
|
||||
|
||||
<wa-button id="popover__autofocus">
|
||||
<wa-icon name="comment" slot="prefix"></wa-icon>
|
||||
<wa-icon name="comment" slot="start"></wa-icon>
|
||||
Feedback
|
||||
</wa-button>
|
||||
```
|
||||
@@ -7,9 +7,7 @@ icon: progress-bar
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="40">
|
||||
<wa-icon slot="prefix" name="tasks"></wa-icon>
|
||||
</wa-progress-bar>
|
||||
<wa-progress-bar value="40"></wa-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -6,9 +6,7 @@ icon: progress-ring
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25">
|
||||
<wa-icon slot="prefix" name="circle-notch"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="25"></wa-progress-ring>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -18,9 +16,7 @@ icon: progress-ring
|
||||
Use the `--size` custom property to set the diameter of the progress ring.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--size: 200px;">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Track and Indicator Width
|
||||
@@ -28,9 +24,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
||||
Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
|
||||
<wa-icon slot="prefix" name="arrows-alt"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Colors
|
||||
@@ -45,7 +39,6 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
||||
--indicator-color: deeppink;
|
||||
"
|
||||
>
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
```
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
<br />
|
||||
|
||||
<wa-input maxlength="255" with-clear label="Value">
|
||||
<wa-icon slot="prefix" name="link"></wa-icon>
|
||||
<wa-icon slot="start" name="link"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
|
||||
@@ -46,9 +46,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Size
|
||||
@@ -56,9 +54,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
|
||||
Use the `size` attribute to change the size of the QR code.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" size="64">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Radius
|
||||
@@ -66,9 +62,7 @@ Use the `size` attribute to change the size of the QR code.
|
||||
Create a rounded effect with the `radius` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5">
|
||||
<wa-icon slot="prefix" name="circle"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
@@ -77,18 +71,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q
|
||||
|
||||
```html {.example}
|
||||
<div class="qr-error-correction">
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -7,71 +7,4 @@ native: radio
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/docs/components/radio-group).
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
:::info
|
||||
This component works with standard `<form>` elements. Please refer to the section on [form controls](/docs/form-controls) to learn more about form submission and client-side validation.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Initial Value
|
||||
|
||||
To set the initial value and checked state, use the `value` attribute on the containing radio group.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="3">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group size="small" value="1">
|
||||
<wa-radio value="1">Small 1</wa-radio>
|
||||
<wa-radio value="2">Small 2</wa-radio>
|
||||
<wa-radio value="3">Small 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="medium" value="1">
|
||||
<wa-radio value="1">Medium 1</wa-radio>
|
||||
<wa-radio value="2">Medium 2</wa-radio>
|
||||
<wa-radio value="3">Medium 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-radio-group size="large" value="1">
|
||||
<wa-radio value="1">Large 1</wa-radio>
|
||||
<wa-radio value="2">Large 2</wa-radio>
|
||||
<wa-radio value="3">Large 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
This component must be used as a child of `<wa-radio-group>`. Please see the [Radio Group docs](/docs/components/radio-group) to see examples of this component in action.
|
||||
|
||||
@@ -208,54 +208,30 @@ The preferred placement of the select's listbox can be set with the `placement`
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
### Prefix Icons
|
||||
### Start & End Decorations
|
||||
|
||||
Use the `prefix` slot to prepend an icon to the control.
|
||||
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the combobox.
|
||||
|
||||
```html {.example}
|
||||
<wa-select placeholder="Small" size="small" with-clear>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="flag-checkered"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<br />
|
||||
<wa-select placeholder="Medium" size="medium" with-clear>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="flag-checkered"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<br />
|
||||
<wa-select placeholder="Large" size="large" with-clear>
|
||||
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
### Suffix Icons
|
||||
|
||||
Use the `suffix` slot to append an icon to the control.
|
||||
|
||||
```html {.example}
|
||||
<wa-select placeholder="Small" size="small" with-clear>
|
||||
<wa-icon name="house" slot="suffix"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<br />
|
||||
<wa-select placeholder="Medium" size="medium" with-clear>
|
||||
<wa-icon name="house" slot="suffix"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
<br />
|
||||
<wa-select placeholder="Large" size="large" with-clear>
|
||||
<wa-icon name="house" slot="suffix"></wa-icon>
|
||||
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
|
||||
<wa-icon slot="end" name="flag-checkered"></wa-icon>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
@@ -277,15 +253,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
|
||||
class="custom-tag"
|
||||
>
|
||||
<wa-option value="email">
|
||||
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="envelope" variant="solid"></wa-icon>
|
||||
Email
|
||||
</wa-option>
|
||||
<wa-option value="phone">
|
||||
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="phone" variant="solid"></wa-icon>
|
||||
Phone
|
||||
</wa-option>
|
||||
<wa-option value="chat">
|
||||
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="comment" variant="solid"></wa-icon>
|
||||
Chat
|
||||
</wa-option>
|
||||
</wa-select>
|
||||
@@ -297,7 +273,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
|
||||
|
||||
select.getTag = (option, index) => {
|
||||
// Use the same icon used in wa-option
|
||||
const name = option.querySelector('wa-icon[slot="prefix"]').name;
|
||||
const name = option.querySelector('wa-icon[slot="start"]').name;
|
||||
|
||||
// You can return a string, a Lit Template, or an HTMLElement here
|
||||
return `
|
||||
|
||||
@@ -6,20 +6,4 @@ parent: tab-group
|
||||
icon: tab-panel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="general">General</wa-tab>
|
||||
<wa-tab panel="custom">Custom</wa-tab>
|
||||
<wa-tab panel="advanced">Advanced</wa-tab>
|
||||
<wa-tab panel="disabled" disabled>Disabled</wa-tab>
|
||||
|
||||
<wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
|
||||
<wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
|
||||
<wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
|
||||
<wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
```
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
|
||||
:::
|
||||
This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.
|
||||
|
||||
@@ -6,6 +6,4 @@ parent: tab-group
|
||||
icon: tab
|
||||
---
|
||||
|
||||
:::info
|
||||
Additional demonstrations can be found in the [tab group examples](/docs/components/tab-group).
|
||||
:::
|
||||
This component must be used as a child of `<wa-tab-group>`. Please see the [Tab Group docs](/docs/components/tab-group) to see examples of this component in action.
|
||||
|
||||
@@ -5,78 +5,4 @@ tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-tree>
|
||||
<wa-tree-item>
|
||||
Item 1
|
||||
<wa-tree-item>Item A</wa-tree-item>
|
||||
<wa-tree-item>Item B</wa-tree-item>
|
||||
<wa-tree-item>Item C</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item 2</wa-tree-item>
|
||||
<wa-tree-item>Item 3</wa-tree-item>
|
||||
</wa-tree>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Nested tree items
|
||||
|
||||
A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.
|
||||
|
||||
```html {.example}
|
||||
<wa-tree>
|
||||
<wa-tree-item>
|
||||
Item 1
|
||||
<wa-tree-item>
|
||||
Item A
|
||||
<wa-tree-item>Item Z</wa-tree-item>
|
||||
<wa-tree-item>Item Y</wa-tree-item>
|
||||
<wa-tree-item>Item X</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item B</wa-tree-item>
|
||||
<wa-tree-item>Item C</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item 2</wa-tree-item>
|
||||
<wa-tree-item>Item 3</wa-tree-item>
|
||||
</wa-tree>
|
||||
```
|
||||
|
||||
### Selected
|
||||
|
||||
Use the `selected` attribute to select a tree item initially.
|
||||
|
||||
```html {.example}
|
||||
<wa-tree>
|
||||
<wa-tree-item selected>
|
||||
Item 1
|
||||
<wa-tree-item>Item A</wa-tree-item>
|
||||
<wa-tree-item>Item B</wa-tree-item>
|
||||
<wa-tree-item>Item C</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item 2</wa-tree-item>
|
||||
<wa-tree-item>Item 3</wa-tree-item>
|
||||
</wa-tree>
|
||||
```
|
||||
|
||||
### Expanded
|
||||
|
||||
Use the `expanded` attribute to expand a tree item initially.
|
||||
|
||||
```html {.example}
|
||||
<wa-tree>
|
||||
<wa-tree-item expanded>
|
||||
Item 1
|
||||
<wa-tree-item expanded>
|
||||
Item A
|
||||
<wa-tree-item>Item Z</wa-tree-item>
|
||||
<wa-tree-item>Item Y</wa-tree-item>
|
||||
<wa-tree-item>Item X</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item B</wa-tree-item>
|
||||
<wa-tree-item>Item C</wa-tree-item>
|
||||
</wa-tree-item>
|
||||
<wa-tree-item>Item 2</wa-tree-item>
|
||||
<wa-tree-item>Item 3</wa-tree-item>
|
||||
</wa-tree>
|
||||
```
|
||||
This component must be used as a child of `<wa-tree>`. Please see the [Tree docs](/docs/components/tree) to see examples of this component in action.
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Clamped Color Tokens
|
||||
layout: block
|
||||
---
|
||||
|
||||
{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
|
||||
{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
|
||||
|
||||
<table class="colors">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="core-column">Core tint</th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr class="wa-color-{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<style>
|
||||
.core-column .color.swatch::before {
|
||||
counter-reset: key var(--key);
|
||||
content: counter(key);
|
||||
}
|
||||
</style>
|
||||
@@ -671,7 +671,7 @@ hasOutline: false
|
||||
<div style="display: grid; grid-template-rows: minmax(0, auto) minmax(0, 1fr); height: 100%; gap: 1rem;">
|
||||
<div style="display: flex; gap: 1.25rem;">
|
||||
<wa-input name="icon-search" autofocus placeholder="Search Icons" with-clear style="flex: 1 1 auto;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-select name="icon-variant" value="solid" style="flex: 0 1 auto;">
|
||||
<wa-option value="solid">Solid</wa-option>
|
||||
@@ -2017,7 +2017,7 @@ hasOutline: false
|
||||
<div class="title">
|
||||
<h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
|
||||
<wa-button variant="brand" class="hero-cta">
|
||||
<wa-icon slot="prefix" name="arrow-down"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-down"></wa-icon>
|
||||
Free Your Mind
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2037,11 +2037,11 @@ hasOutline: false
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2060,11 +2060,11 @@ hasOutline: false
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2082,11 +2082,11 @@ hasOutline: false
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2236,7 +2236,7 @@ hasOutline: false
|
||||
</div>
|
||||
<div class="send">
|
||||
<wa-button variant="brand" size="small">
|
||||
<wa-icon slot="prefix" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
|
||||
<wa-icon slot="start" name="paper-plane-top" variant="solid" label="Add File"></wa-icon>
|
||||
Send
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2286,11 +2286,11 @@ hasOutline: false
|
||||
<div style="display: flex; align-items: end; gap: 1rem;">
|
||||
<wa-input type="number" label="How many?"></wa-input>
|
||||
<wa-button variant="brand">
|
||||
<wa-icon slot="prefix" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
|
||||
<wa-icon slot="start" name="bag-shopping" variant="solid" label="Add to Basket"></wa-icon>
|
||||
Add to Basket
|
||||
</wa-button>
|
||||
<wa-button variant="neutral">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -2321,19 +2321,19 @@ hasOutline: false
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
@@ -2349,19 +2349,19 @@ hasOutline: false
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
@@ -2377,19 +2377,19 @@ hasOutline: false
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
@@ -2405,19 +2405,19 @@ hasOutline: false
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
@@ -2433,19 +2433,19 @@ hasOutline: false
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret size="small">Action</wa-button>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="check" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="check" variant="regular"></wa-icon>
|
||||
Resolved
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="clock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="clock" variant="regular"></wa-icon>
|
||||
Pending
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-rotate-left" variant="regular"></wa-icon>
|
||||
Re-open
|
||||
</wa-dropdown-item>
|
||||
<wa-dropdown-item>
|
||||
<wa-icon slot="prefix" name="xmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="xmark" variant="regular"></wa-icon>
|
||||
Delete
|
||||
</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
@@ -2460,30 +2460,30 @@ hasOutline: false
|
||||
<h2 style="margin-bottom: var(--wa-space-3xl);">Payment</h2>
|
||||
<form>
|
||||
<wa-input type="email" placeholder="ex. tanderson@metacortex.com" label="Email">
|
||||
<wa-icon name="envelope" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="envelope" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input placeholder="1234 1234 1234 1234" label="Card Number">
|
||||
<wa-icon name="credit-card" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="credit-card" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<wa-input placeholder="MM / YY" label="Expiration">
|
||||
<wa-icon name="calendar" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="calendar" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input placeholder="CVC" label="CVC">
|
||||
<wa-icon name="lock" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="lock" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
<wa-input placeholder="Thomas Anderson" label="Cardholder Name">
|
||||
<wa-icon name="user" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="user" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<wa-select label="Country" value="USA">
|
||||
<wa-icon slot="prefix" name="globe" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="globe" variant="regular"></wa-icon>
|
||||
<wa-option value="USA">United States</wa-option>
|
||||
<wa-option value="CAN">Canada</wa-option>
|
||||
</wa-select>
|
||||
<wa-input placeholder="12345" label="Zip">
|
||||
<wa-icon name="location-dot" variant="regular" slot="prefix"></wa-icon>
|
||||
<wa-icon name="location-dot" variant="regular" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
<wa-switch checked style="margin: var(--wa-space-2xl) 0 var(--wa-space-3xl) 0;">Sign me up for more offers from this store</wa-switch>
|
||||
|
||||
@@ -14,6 +14,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: `input` and `change` events on form controls like `<wa-input>` now are always set to `bubble` and `compose`.
|
||||
- 🚨 BREAKING: Greatly simplified how native styles work and removed redundant utilities
|
||||
- Removed `.wa-button`, `.wa-callout` classes
|
||||
- Removed `themes/native/*.css` files; use `native.css` to opt into native styles
|
||||
@@ -52,6 +53,12 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- 🚨 BREAKING: completely reworked `<wa-dropdown>` to be easier to use
|
||||
- Added `<wa-dropdown-item>`, greatly simplifying the dropdown's markup structure
|
||||
- Removed `<wa-menu>`, `<wa-menu-item>`, and `<wa-menu-label>`; use `<wa-dropdown-item>` and native headings instead
|
||||
- 🚨 BREAKING: renamed all `prefix` and `suffix` slots to `start` and `end`, affecting the following components:
|
||||
- `<wa-breadcrumb-item>`
|
||||
- `<wa-button>`
|
||||
- `<wa-input>`
|
||||
- `<wa-select>`
|
||||
- `<wa-option>`
|
||||
- Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
|
||||
- Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
|
||||
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
|
||||
@@ -371,4 +378,4 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
@@ -18,7 +18,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
|
||||
- Learn more about the project, its values, and its roadmap
|
||||
|
||||
<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
|
||||
<wa-icon name="github" family="brands" slot="prefix"></wa-icon>
|
||||
<wa-icon name="github" family="brands" slot="start"></wa-icon>
|
||||
Join the Discussion
|
||||
</wa-button>
|
||||
|
||||
@@ -32,7 +32,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
|
||||
- Chat live with other designers, developers, and Web Awesome fans
|
||||
|
||||
<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
|
||||
<wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
|
||||
<wa-icon name="discord" family="brands" slot="start"></wa-icon>
|
||||
Join the Chat
|
||||
</wa-button>
|
||||
|
||||
@@ -43,6 +43,6 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
|
||||
**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
|
||||
|
||||
<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
|
||||
<wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
|
||||
<wa-icon name="twitter" family="brands" slot="start"></wa-icon>
|
||||
Follow on Twitter
|
||||
</wa-button>
|
||||
|
||||
@@ -26,7 +26,7 @@ unlisted: true
|
||||
{% if theme.fileSlug === 'custom' %}
|
||||
<p>
|
||||
<wa-button href="../edit/" class="edit-link" target="_parent" appearance="outlined">
|
||||
<wa-icon slot="prefix" name="pencil"></wa-icon>
|
||||
<wa-icon slot="start" name="pencil"></wa-icon>
|
||||
Edit theme
|
||||
</wa-button>
|
||||
</p>
|
||||
|
||||
@@ -42,7 +42,7 @@ unlisted: true
|
||||
<wa-tab-panel name="css">
|
||||
<p>
|
||||
<wa-button variant="brand" :href="code.css.blob" :download="cssFilename">
|
||||
<wa-icon name="arrow-down-to-line" variant="solid" slot="prefix"></wa-icon>
|
||||
<wa-icon name="arrow-down-to-line" variant="solid" slot="start"></wa-icon>
|
||||
Download <code v-text="cssFilename"></code>
|
||||
</wa-button>
|
||||
</p>
|
||||
@@ -153,7 +153,7 @@ unlisted: true
|
||||
</icons-card>
|
||||
|
||||
<wa-input label="Font Awesome Pro Kit Code" v-model="theme.icon.kit" placeholder="e.g. f0nta7e50e">
|
||||
<info-tip slot="suffix"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
|
||||
<info-tip slot="end"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
|
||||
<a href="https://fontawesome.com/kits" target="_blank" slot="hint" class="wa-caption-m wa-cluster wa-gap-2xs">
|
||||
<span>Find your kit code here</span>
|
||||
<wa-icon name="arrow-up-right-from-square" variant="regular" style="font-size: 0.75em"></wa-icon>
|
||||
|
||||
@@ -36,7 +36,7 @@ noTheme: true
|
||||
<div class="title">
|
||||
<h1 class="hero-title">What you know you can't explain, but you feel it.</h1>
|
||||
<wa-button variant="brand" class="hero-cta">
|
||||
<wa-icon slot="prefix" name="arrow-down"></wa-icon>
|
||||
<wa-icon slot="start" name="arrow-down"></wa-icon>
|
||||
Free Your Mind
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -56,11 +56,11 @@ noTheme: true
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -79,11 +79,11 @@ noTheme: true
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
@@ -101,11 +101,11 @@ noTheme: true
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<wa-button size="small">
|
||||
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Add to Cart
|
||||
</wa-button>
|
||||
<wa-button size="small" appearance="outline">
|
||||
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="bookmark" variant="regular"></wa-icon>
|
||||
Save
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -108,11 +108,11 @@ For example, a button's default slot is used to populate its label.
|
||||
<wa-button>Click me</wa-button>
|
||||
```
|
||||
|
||||
Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
|
||||
Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="start"` attribute? This tells the component to place the icon into its `start` slot.
|
||||
|
||||
```html
|
||||
<wa-button>
|
||||
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
|
||||
<wa-icon slot="start" name="gear" variant="solid"></wa-icon>
|
||||
Settings
|
||||
</wa-button>
|
||||
```
|
||||
|
||||
@@ -37,7 +37,7 @@ Flanks work especially well for asides, inputs with adjacent buttons, and rich d
|
||||
```html {.example}
|
||||
<div class="wa-flank:end wa-gap-xs">
|
||||
<wa-input>
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button>Search</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -36,10 +36,10 @@ Stacks are well suited for forms, text, and ensuring consistent spacing between
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-input label="Email">
|
||||
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input label="Password" type="password">
|
||||
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
|
||||
<wa-icon slot="start" name="lock" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-checkbox>Remember me on this device</wa-checkbox>
|
||||
<wa-button>Log In</wa-button>
|
||||
|
||||
@@ -222,7 +222,7 @@ layout: page
|
||||
text-align: left;
|
||||
white-space: wrap;
|
||||
}
|
||||
wa-button.tile::part(suffix) {
|
||||
wa-button.tile::part(end) {
|
||||
display: none;
|
||||
}
|
||||
wa-button.tile {
|
||||
@@ -266,7 +266,7 @@ layout: page
|
||||
<div class="hero-cta">
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="prefix" name="person-running"></wa-icon>
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
@@ -45,25 +45,25 @@
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
display: none;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
::slotted([slot='prefix']) {
|
||||
::slotted([slot='start']) {
|
||||
margin-inline-end: var(--wa-space-s);
|
||||
}
|
||||
|
||||
::slotted([slot='suffix']) {
|
||||
::slotted([slot='end']) {
|
||||
margin-inline-start: var(--wa-space-s);
|
||||
}
|
||||
|
||||
|
||||
@@ -122,11 +122,11 @@ describe('<wa-breadcrumb-item>', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when provided an element in the slot "prefix" to support prefix icons', () => {
|
||||
describe('when provided an element in the slot "start" to support start icons', () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
const el = await fixture<WaBreadcrumbItem>(html`
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="prefix">/</span>
|
||||
<span class="start-example" slot="start">/</span>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
`);
|
||||
@@ -136,22 +136,22 @@ describe('<wa-breadcrumb-item>', () => {
|
||||
it('should accept as an assigned child in the shadow root', async () => {
|
||||
const el = await fixture<WaBreadcrumbItem>(html`
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="prefix">/</span>
|
||||
<span class="start-example" slot="start">/</span>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
`);
|
||||
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=prefix]')!;
|
||||
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=start]')!;
|
||||
const childNodes = slot.assignedNodes({ flatten: true });
|
||||
|
||||
expect(childNodes.length).to.eq(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('when provided an element in the slot "suffix" to support suffix icons', () => {
|
||||
describe('when provided an element in the slot "end" to support end icons', () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
const el = await fixture<WaBreadcrumbItem>(html`
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="suffix">/</span>
|
||||
<span class="end-example" slot="end">/</span>
|
||||
Security
|
||||
</wa-breadcrumb-item>
|
||||
`);
|
||||
@@ -162,11 +162,11 @@ describe('<wa-breadcrumb-item>', () => {
|
||||
it('should accept as an assigned child in the shadow root', async () => {
|
||||
const el = await fixture<WaBreadcrumbItem>(html`
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="suffix">/</span>
|
||||
<span class="end-example" slot="end">/</span>
|
||||
Security
|
||||
</wa-breadcrumb-item>
|
||||
`);
|
||||
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=suffix]')!;
|
||||
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=end]')!;
|
||||
const childNodes = slot.assignedNodes({ flatten: true });
|
||||
|
||||
expect(childNodes.length).to.eq(1);
|
||||
|
||||
@@ -6,20 +6,20 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './breadcrumb-item.css';
|
||||
|
||||
/**
|
||||
* @summary Breadcrumb Items are used inside [breadcrumbs](/docs/components/breadcrumb) to represent different links.
|
||||
* @summary Breadcrumb Items are used inside breadcrumbs to represent different links.
|
||||
* @documentation https://backers.webawesome.com/docs/components/breadcrumb-item
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
*
|
||||
* @slot - The breadcrumb item's label.
|
||||
* @slot prefix - An optional prefix, usually an icon.
|
||||
* @slot suffix - An optional suffix, usually an icon.
|
||||
* @slot start - An element, such as `<wa-icon>`, placed before the label.
|
||||
* @slot end - An element, such as `<wa-icon>`, placed after the label.
|
||||
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
|
||||
* you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
|
||||
*
|
||||
* @csspart label - The breadcrumb item's label.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart end - The container that wraps the `end` slot.
|
||||
* @csspart separator - The container that wraps the separator.
|
||||
*/
|
||||
@customElement('wa-breadcrumb-item')
|
||||
@@ -71,8 +71,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<span part="prefix" class="prefix">
|
||||
<slot name="prefix"></slot>
|
||||
<span part="start" class="start">
|
||||
<slot name="start"></slot>
|
||||
</span>
|
||||
|
||||
${this.renderType === 'link'
|
||||
@@ -103,8 +103,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
|
||||
`
|
||||
: ''}
|
||||
|
||||
<span part="suffix" class="suffix">
|
||||
<slot name="suffix"></slot>
|
||||
<span part="end" class="end">
|
||||
<slot name="end"></slot>
|
||||
</span>
|
||||
|
||||
<span part="separator" class="separator" aria-hidden="true">
|
||||
|
||||
@@ -95,12 +95,12 @@ describe('<wa-breadcrumb>', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', () => {
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "start" to support start icons', () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
const el = await fixture<WaBreadcrumb>(html`
|
||||
<wa-breadcrumb>
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="prefix">/</span>
|
||||
<span class="start-example" slot="start">/</span>
|
||||
Home
|
||||
</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>First</wa-breadcrumb-item>
|
||||
@@ -112,7 +112,7 @@ describe('<wa-breadcrumb>', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', () => {
|
||||
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "end" to support end icons', () => {
|
||||
it('should pass accessibility tests', async () => {
|
||||
const el = await fixture<WaBreadcrumb>(html`
|
||||
<wa-breadcrumb>
|
||||
@@ -120,7 +120,7 @@ describe('<wa-breadcrumb>', () => {
|
||||
<wa-breadcrumb-item>Second</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>Third</wa-breadcrumb-item>
|
||||
<wa-breadcrumb-item>
|
||||
<span class="prefix-example" slot="suffix">/</span>
|
||||
<span class="end-example" slot="end">/</span>
|
||||
Security
|
||||
</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
|
||||
@@ -107,8 +107,8 @@
|
||||
* Label
|
||||
*/
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -137,7 +137,7 @@ wa-icon[part~='caret'] {
|
||||
height: 0.875em;
|
||||
}
|
||||
|
||||
.button:has(&) .suffix {
|
||||
.button:has(&) .end {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -150,9 +150,9 @@ wa-icon[part~='caret'] {
|
||||
position: relative;
|
||||
cursor: wait;
|
||||
|
||||
.prefix,
|
||||
.start,
|
||||
.label,
|
||||
.suffix,
|
||||
.end,
|
||||
.caret {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -191,11 +191,11 @@ button ::slotted(wa-badge) {
|
||||
* Button spacing
|
||||
*/
|
||||
|
||||
slot[name='prefix']::slotted(*) {
|
||||
slot[name='start']::slotted(*) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
slot[name='suffix']::slotted(*),
|
||||
slot[name='end']::slotted(*),
|
||||
.button:not(.visually-hidden-label) [part~='caret'] {
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
@@ -29,13 +29,13 @@ import styles from './button.css';
|
||||
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
||||
*
|
||||
* @slot - The button's label.
|
||||
* @slot prefix - A presentational prefix icon or similar element.
|
||||
* @slot suffix - A presentational suffix icon or similar element.
|
||||
* @slot start - An element, such as `<wa-icon>`, placed before the label.
|
||||
* @slot end - An element, such as `<wa-icon>`, placed after the label.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart label - The button's label.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart end - The container that wraps the `end` slot.
|
||||
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
|
||||
* @csspart spinner - The spinner that shows when the button is in the loading state.
|
||||
*
|
||||
@@ -60,7 +60,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
assumeInteractionOn = ['click'];
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
@query('.button') button: HTMLButtonElement | HTMLLinkElement;
|
||||
@@ -263,8 +263,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
loading: this.loading,
|
||||
rtl: this.localize.dir() === 'rtl',
|
||||
'has-label': this.hasSlotController.test('[default]'),
|
||||
'has-prefix': this.hasSlotController.test('prefix'),
|
||||
'has-suffix': this.hasSlotController.test('suffix'),
|
||||
'has-start': this.hasSlotController.test('start'),
|
||||
'has-end': this.hasSlotController.test('end'),
|
||||
'is-icon-button': this.isIconButton,
|
||||
})}
|
||||
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
|
||||
@@ -282,9 +282,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
|
||||
@invalid=${this.isButton() ? this.handleInvalid : null}
|
||||
@click=${this.handleClick}
|
||||
>
|
||||
<slot name="prefix" part="prefix" class="prefix"></slot>
|
||||
<slot name="start" part="start" class="start"></slot>
|
||||
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
|
||||
<slot name="suffix" part="suffix" class="suffix"></slot>
|
||||
<slot name="end" part="end" class="end"></slot>
|
||||
${
|
||||
this.caret
|
||||
? html`
|
||||
|
||||
@@ -4,7 +4,7 @@ import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import styles from './carousel-item.css';
|
||||
|
||||
/**
|
||||
* @summary A carousel item represent a slide within a [carousel](/docs/components/carousel).
|
||||
* @summary A carousel item represent a slide within a carousel.
|
||||
*
|
||||
* @since 2.0
|
||||
* @status experimental
|
||||
|
||||
@@ -132,7 +132,9 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
this.hasInteracted = true;
|
||||
this.checked = !this.checked;
|
||||
this.indeterminate = false;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
@watch('defaultChecked')
|
||||
|
||||
@@ -300,6 +300,7 @@ describe('<wa-color-picker>', () => {
|
||||
await sendKeys({ type: 'fc0' }); // type in a color
|
||||
input.blur(); // commit changes by blurring the field
|
||||
await el.updateComplete;
|
||||
await aTimeout(1);
|
||||
|
||||
expect(changeHandler).to.have.been.calledOnce;
|
||||
expect(inputHandler).to.have.been.calledOnce;
|
||||
|
||||
@@ -74,15 +74,15 @@ declare const EyeDropper: EyeDropperConstructor;
|
||||
* @csspart input - The text input.
|
||||
* @csspart eye-dropper-button - The eye dropper button.
|
||||
* @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
|
||||
* @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
|
||||
* @csspart eye-dropper-button__start - The eye dropper button's exported `start` part.
|
||||
* @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
|
||||
* @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
|
||||
* @csspart eye-dropper-button__end - The eye dropper button's exported `end` part.
|
||||
* @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
|
||||
* @csspart format-button - The format button.
|
||||
* @csspart format-button__base - The format button's exported `button` part.
|
||||
* @csspart format-button__prefix - The format button's exported `prefix` part.
|
||||
* @csspart format-button__start - The format button's exported `start` part.
|
||||
* @csspart format-button__label - The format button's exported `label` part.
|
||||
* @csspart format-button__suffix - The format button's exported `suffix` part.
|
||||
* @csspart format-button__end - The format button's exported `end` part.
|
||||
* @csspart format-button__caret - The format button's exported `caret` part.
|
||||
*
|
||||
* @cssproperty --background-color - The color picker's background color.
|
||||
@@ -275,8 +275,11 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
const nextIndex = (formats.indexOf(this.format) + 1) % formats.length;
|
||||
this.format = formats[nextIndex] as 'hex' | 'rgb' | 'hsl' | 'hsv';
|
||||
this.setColor(this.value || '');
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
private handleAlphaDrag(event: PointerEvent) {
|
||||
@@ -296,13 +299,18 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -326,13 +334,17 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
});
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -359,14 +371,18 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== currentValue) {
|
||||
currentValue = this.value;
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
},
|
||||
onStop: () => {
|
||||
this.isDraggingGridHandle = false;
|
||||
if (this.value !== initialValue) {
|
||||
initialValue = this.value;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
},
|
||||
initialEvent: event,
|
||||
@@ -402,8 +418,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -436,8 +454,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -470,8 +490,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -490,8 +512,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -511,8 +535,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.input.value = this.value;
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
setTimeout(() => this.input.select());
|
||||
@@ -696,8 +722,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.setColor(colorSelectionResult.sRGBHex);
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -712,8 +740,10 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
this.setColor(color);
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1181,9 +1211,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
aria-label=${this.localize.term('toggleColorFormat')}
|
||||
exportparts="
|
||||
base:format-button__base,
|
||||
prefix:format-button__prefix,
|
||||
start:format-button__start,
|
||||
label:format-button__label,
|
||||
suffix:format-button__suffix,
|
||||
end:format-button__end,
|
||||
caret:format-button__caret
|
||||
"
|
||||
@click=${this.handleFormatToggle}
|
||||
@@ -1202,9 +1232,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
appearance="outlined"
|
||||
exportparts="
|
||||
base:eye-dropper-button__base,
|
||||
prefix:eye-dropper-button__prefix,
|
||||
start:eye-dropper-button__start,
|
||||
label:eye-dropper-button__label,
|
||||
suffix:eye-dropper-button__suffix,
|
||||
end:eye-dropper-button__end,
|
||||
caret:eye-dropper-button__caret
|
||||
"
|
||||
@click=${this.handleEyeDropper}
|
||||
|
||||
@@ -33,7 +33,7 @@ import styles from './dropdown-item.css';
|
||||
export default class WaDropdownItem extends WebAwesomeElement {
|
||||
static css = styles;
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
|
||||
|
||||
@query('#submenu') submenuElement: HTMLDivElement;
|
||||
|
||||
|
||||
@@ -129,8 +129,8 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
align-items: center;
|
||||
@@ -141,11 +141,11 @@ textarea {
|
||||
}
|
||||
}
|
||||
|
||||
.prefix::slotted(*) {
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
.suffix::slotted(*) {
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
|
||||
@@ -25,8 +25,8 @@ import styles from './input.css';
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
|
||||
* @slot suffix - Used to append a presentational icon or similar element to the input.
|
||||
* @slot start - An element, such as `<wa-icon>`, placed at the start of the input control.
|
||||
* @slot end - An element, such as `<wa-icon>`, placed at the end of the input control.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
|
||||
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
|
||||
@@ -43,10 +43,10 @@ import styles from './input.css';
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart input - The wrapper being rendered as an input
|
||||
* @csspart base - The internal `<input>` control.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart clear-button - The clear button.
|
||||
* @csspart password-toggle-button - The password toggle button.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart end - The container that wraps the `end` slot.
|
||||
*
|
||||
* @cssproperty --background-color - The input's background color.
|
||||
* @cssproperty --border-color - The color of the input's borders.
|
||||
@@ -223,8 +223,9 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
@property({ attribute: 'with-hint', type: Boolean }) withHint = false;
|
||||
|
||||
private handleChange(event: Event) {
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.value = this.input.value;
|
||||
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
}
|
||||
|
||||
private handleClearClick(event: MouseEvent) {
|
||||
@@ -232,9 +233,12 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
if (this.value !== '') {
|
||||
this.value = '';
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
this.input.focus();
|
||||
@@ -356,7 +360,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
</label>
|
||||
|
||||
<div part="input" class="text-field">
|
||||
<slot name="prefix" part="prefix" class="prefix"></slot>
|
||||
<slot name="start" part="start" class="start"></slot>
|
||||
|
||||
<input
|
||||
part="base"
|
||||
@@ -430,7 +434,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
`
|
||||
: ''}
|
||||
|
||||
<slot name="suffix" part="suffix" class="suffix"></slot>
|
||||
<slot name="end" part="end" class="end"></slot>
|
||||
</div>
|
||||
|
||||
<slot
|
||||
|
||||
@@ -62,18 +62,18 @@
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.prefix::slotted(*) {
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
.suffix::slotted(*) {
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import '../icon/icon.js';
|
||||
import styles from './option.css';
|
||||
|
||||
/**
|
||||
* @summary Options define the selectable items within various form controls such as [select](/docs/components/select).
|
||||
* @summary Options define the selectable items within a select component.
|
||||
* @documentation https://backers.webawesome.com/docs/components/option
|
||||
* @status stable
|
||||
* @since 2.0
|
||||
@@ -16,8 +16,8 @@ import styles from './option.css';
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The option's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the menu item.
|
||||
* @slot suffix - Used to append an icon or similar element to the menu item.
|
||||
* @slot start - An element, such as `<wa-icon>`, placed before the label.
|
||||
* @slot end - An element, such as `<wa-icon>`, placed after the label.
|
||||
*
|
||||
* @cssproperty --background-color-current - The current option's background color.
|
||||
* @cssproperty --background-color-hover - The options's background color on hover.
|
||||
@@ -26,8 +26,8 @@ import styles from './option.css';
|
||||
*
|
||||
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
|
||||
* @csspart label - The option's label.
|
||||
* @csspart prefix - The container that wraps the prefix.
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart end - The container that wraps the `end` slot.
|
||||
*
|
||||
* @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
|
||||
* @cssstate selected - The option is selected and has aria-selected="true"
|
||||
@@ -192,9 +192,9 @@ export default class WaOption extends WebAwesomeElement {
|
||||
variant="solid"
|
||||
aria-hidden="true"
|
||||
></wa-icon>
|
||||
<slot part="prefix" name="prefix" class="prefix"></slot>
|
||||
<slot part="start" name="start" class="start"></slot>
|
||||
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
|
||||
<slot part="suffix" name="suffix" class="suffix"></slot>
|
||||
<slot part="end" name="end" class="end"></slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -171,8 +171,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -274,8 +276,10 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
@@ -101,7 +101,9 @@ export default class WaRating extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
this.setValue(this.getValueFromMousePosition(event));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
private setValue(newValue: number) {
|
||||
@@ -145,7 +147,9 @@ export default class WaRating extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -178,7 +182,9 @@ export default class WaRating extends WebAwesomeElement {
|
||||
private handleTouchEnd(event: TouchEvent) {
|
||||
this.isHovering = false;
|
||||
this.setValue(this.hoverValue);
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
|
||||
// Prevent click on mobile devices
|
||||
event.preventDefault();
|
||||
|
||||
@@ -158,25 +158,25 @@ label:has(select),
|
||||
}
|
||||
}
|
||||
|
||||
/* Prefix and Suffix */
|
||||
/* Start and End */
|
||||
|
||||
.prefix,
|
||||
.suffix {
|
||||
.start,
|
||||
.end {
|
||||
flex: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
.suffix::slotted(*) {
|
||||
.end::slotted(*) {
|
||||
margin-inline-start: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
.prefix::slotted(*) {
|
||||
.start::slotted(*) {
|
||||
margin-inline-end: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
:host([multiple]) .prefix::slotted(*) {
|
||||
:host([multiple]) .start::slotted(*) {
|
||||
margin-inline: var(--wa-form-control-padding-inline);
|
||||
}
|
||||
|
||||
|
||||
@@ -41,8 +41,8 @@ import styles from './select.css';
|
||||
*
|
||||
* @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
|
||||
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
|
||||
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
||||
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
||||
* @slot start - An element, such as `<wa-icon>`, placed at the start of the combobox.
|
||||
* @slot end - An element, such as `<wa-icon>`, placed at the end of the combobox.
|
||||
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
||||
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
|
||||
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
|
||||
@@ -62,9 +62,9 @@ import styles from './select.css';
|
||||
* @csspart form-control-label - The label's wrapper.
|
||||
* @csspart form-control-input - The select's wrapper.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
|
||||
* @csspart prefix - The container that wraps the prefix slot.
|
||||
* @csspart suffix - The container that wraps the suffix slot.
|
||||
* @csspart combobox - The container the wraps the start, end, value, clear icon, and expand button.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart end - The container that wraps the `end` slot.
|
||||
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
|
||||
* @csspart listbox - The listbox container where options are slotted.
|
||||
* @csspart tags - The container that houses option tags when `multiselect` is used.
|
||||
@@ -381,7 +381,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
|
||||
@@ -511,7 +511,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// Emit after update
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new WaClearEvent());
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
@@ -542,7 +542,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
if (this.value !== oldValue) {
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
@@ -600,7 +600,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
@@ -900,7 +900,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
@keydown=${this.handleComboboxKeyDown}
|
||||
@mousedown=${this.handleComboboxMouseDown}
|
||||
>
|
||||
<slot part="prefix" name="prefix" class="prefix"></slot>
|
||||
<slot part="start" name="start" class="start"></slot>
|
||||
|
||||
<input
|
||||
part="display-input"
|
||||
@@ -962,7 +962,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
`
|
||||
: ''}
|
||||
|
||||
<slot name="suffix" part="suffix" class="suffix"></slot>
|
||||
<slot name="end" part="end" class="end"></slot>
|
||||
|
||||
<slot name="expand-icon" part="expand-icon" class="expand-icon">
|
||||
<wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>
|
||||
|
||||
@@ -228,7 +228,9 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
},
|
||||
stop: () => {
|
||||
if (this.minValue !== this.valueWhenDraggingStarted) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
this.hasInteracted = true;
|
||||
}
|
||||
this.hideRangeTooltips();
|
||||
@@ -251,7 +253,9 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
},
|
||||
stop: () => {
|
||||
if (this.maxValue !== this.valueWhenDraggingStarted) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
this.hasInteracted = true;
|
||||
}
|
||||
this.hideRangeTooltips();
|
||||
@@ -321,7 +325,9 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
if (this.activeThumb) {
|
||||
const currentValue = this.activeThumb === 'min' ? this.minValue : this.maxValue;
|
||||
if (currentValue !== this.valueWhenDraggingStarted) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
this.hasInteracted = true;
|
||||
}
|
||||
}
|
||||
@@ -346,7 +352,10 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
},
|
||||
stop: () => {
|
||||
if (this.value !== this.valueWhenDraggingStarted) {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
|
||||
this.hasInteracted = true;
|
||||
}
|
||||
this.hideTooltip();
|
||||
@@ -602,8 +611,10 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
// Dispatch events
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
this.hasInteracted = true;
|
||||
}
|
||||
|
||||
@@ -625,7 +636,9 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Dispatch input events when the value changes by dragging
|
||||
if (this.value !== oldValue) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -658,8 +671,10 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Dispatch input events
|
||||
if (oldValue !== (thumb === 'min' ? this.minValue : this.maxValue)) {
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateFormValue();
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -117,22 +117,29 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
private handleClick() {
|
||||
this.hasInteracted = true;
|
||||
this.checked = !this.checked;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
private handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
this.checked = false;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
this.checked = true;
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input'));
|
||||
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -206,13 +206,14 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
this.valueHasChanged = true;
|
||||
this.value = this.input.value;
|
||||
this.setTextareaDimensions();
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
this.checkValidity();
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
}
|
||||
|
||||
private handleInput() {
|
||||
private handleInput(event: InputEvent) {
|
||||
this.valueHasChanged = true;
|
||||
this.value = this.input.value;
|
||||
this.relayNativeEvent(event, { bubbles: true, composed: true });
|
||||
}
|
||||
|
||||
private setTextareaDimensions() {
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-blue-10);
|
||||
--wa-color-brand-05: var(--wa-color-blue-05);
|
||||
--wa-color-brand: var(--wa-color-blue);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-blue-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-cyan-10);
|
||||
--wa-color-brand-05: var(--wa-color-cyan-05);
|
||||
--wa-color-brand: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-gray-10);
|
||||
--wa-color-brand-05: var(--wa-color-gray-05);
|
||||
--wa-color-brand: var(--wa-color-gray);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-gray-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-green-10);
|
||||
--wa-color-brand-05: var(--wa-color-green-05);
|
||||
--wa-color-brand: var(--wa-color-green);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-green-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-indigo-10);
|
||||
--wa-color-brand-05: var(--wa-color-indigo-05);
|
||||
--wa-color-brand: var(--wa-color-indigo);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-orange-10);
|
||||
--wa-color-brand-05: var(--wa-color-orange-05);
|
||||
--wa-color-brand: var(--wa-color-orange);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-orange-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-pink-10);
|
||||
--wa-color-brand-05: var(--wa-color-pink-05);
|
||||
--wa-color-brand: var(--wa-color-pink);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-pink-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-purple-10);
|
||||
--wa-color-brand-05: var(--wa-color-purple-05);
|
||||
--wa-color-brand: var(--wa-color-purple);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-purple-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-red-10);
|
||||
--wa-color-brand-05: var(--wa-color-red-05);
|
||||
--wa-color-brand: var(--wa-color-red);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-red-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-brand-10: var(--wa-color-yellow-10);
|
||||
--wa-color-brand-05: var(--wa-color-yellow-05);
|
||||
--wa-color-brand: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,375 +5,31 @@
|
||||
:where(:root),
|
||||
:host {
|
||||
/**
|
||||
* Conditional tokens for use in color-mix()
|
||||
* --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
|
||||
* --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
|
||||
* Conditional tokens to check if the key color is >= 60
|
||||
* Key colors are the most colorful tint in a scale, recorded as --wa-color-{hue} in each palette
|
||||
* The numeric value of the key is isolated as --wa-color-{hue}-key
|
||||
* If key < 60, the result is 0%
|
||||
* If key >= 60, the result is 100%
|
||||
* Intended to be used in the color-mix() functions below
|
||||
*/
|
||||
|
||||
--wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
|
||||
--wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
|
||||
--wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
|
||||
--wa-color-red-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-red-key), 1) * 100%));
|
||||
--wa-color-orange-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%));
|
||||
--wa-color-yellow-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%));
|
||||
--wa-color-green-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-green-key), 1) * 100%));
|
||||
--wa-color-cyan-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%));
|
||||
--wa-color-blue-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%));
|
||||
--wa-color-indigo-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%));
|
||||
--wa-color-purple-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%));
|
||||
--wa-color-pink-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%));
|
||||
--wa-color-gray-gte-60: calc(100% - (clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%));
|
||||
|
||||
--wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
|
||||
--wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
|
||||
--wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
|
||||
|
||||
--wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
|
||||
--wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
|
||||
--wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
|
||||
|
||||
--wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
|
||||
--wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
|
||||
--wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
|
||||
|
||||
--wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
|
||||
--wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
|
||||
--wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
|
||||
|
||||
--wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
|
||||
--wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
|
||||
--wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
|
||||
|
||||
--wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
|
||||
--wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
|
||||
--wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
|
||||
|
||||
--wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
|
||||
--wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
|
||||
--wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
|
||||
|
||||
--wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
|
||||
--wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
|
||||
--wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
|
||||
|
||||
--wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
|
||||
--wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
|
||||
--wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
|
||||
|
||||
/*
|
||||
* Convenience tokens for common tint cutoffs
|
||||
* --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
|
||||
* --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
|
||||
/**
|
||||
* Tokens to set text color with appropriate WCAG 2.1 contrast
|
||||
* If key < 60, the text color is white
|
||||
* If key >= 60, the text color is {hue}-10
|
||||
*/
|
||||
|
||||
--wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
|
||||
--wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
|
||||
--wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
|
||||
--wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
|
||||
--wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
|
||||
--wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
|
||||
|
||||
--wa-color-orange-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-50),
|
||||
var(--wa-color-orange-50)
|
||||
);
|
||||
--wa-color-orange-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-50),
|
||||
var(--wa-color-orange-50)
|
||||
);
|
||||
--wa-color-orange-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-60),
|
||||
var(--wa-color-orange-60)
|
||||
);
|
||||
--wa-color-orange-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-60),
|
||||
var(--wa-color-orange-60)
|
||||
);
|
||||
--wa-color-orange-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-70),
|
||||
var(--wa-color-orange-70)
|
||||
);
|
||||
--wa-color-orange-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-70),
|
||||
var(--wa-color-orange-70)
|
||||
);
|
||||
|
||||
--wa-color-yellow-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
|
||||
var(--wa-color-yellow-50)
|
||||
);
|
||||
--wa-color-yellow-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
|
||||
var(--wa-color-yellow-50)
|
||||
);
|
||||
--wa-color-yellow-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
|
||||
var(--wa-color-yellow-60)
|
||||
);
|
||||
--wa-color-yellow-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
|
||||
var(--wa-color-yellow-60)
|
||||
);
|
||||
--wa-color-yellow-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
|
||||
var(--wa-color-yellow-70)
|
||||
);
|
||||
--wa-color-yellow-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
|
||||
var(--wa-color-yellow-70)
|
||||
);
|
||||
|
||||
--wa-color-green-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-50),
|
||||
var(--wa-color-green-50)
|
||||
);
|
||||
--wa-color-green-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-50),
|
||||
var(--wa-color-green-50)
|
||||
);
|
||||
--wa-color-green-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-60),
|
||||
var(--wa-color-green-60)
|
||||
);
|
||||
--wa-color-green-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-60),
|
||||
var(--wa-color-green-60)
|
||||
);
|
||||
--wa-color-green-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-70),
|
||||
var(--wa-color-green-70)
|
||||
);
|
||||
--wa-color-green-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-70),
|
||||
var(--wa-color-green-70)
|
||||
);
|
||||
|
||||
--wa-color-cyan-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-lt-50),
|
||||
var(--wa-color-cyan-50)
|
||||
);
|
||||
--wa-color-cyan-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
|
||||
var(--wa-color-cyan-50)
|
||||
);
|
||||
--wa-color-cyan-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-lt-60),
|
||||
var(--wa-color-cyan-60)
|
||||
);
|
||||
--wa-color-cyan-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
|
||||
var(--wa-color-cyan-60)
|
||||
);
|
||||
--wa-color-cyan-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-lt-70),
|
||||
var(--wa-color-cyan-70)
|
||||
);
|
||||
--wa-color-cyan-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
|
||||
var(--wa-color-cyan-70)
|
||||
);
|
||||
|
||||
--wa-color-blue-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-lt-50),
|
||||
var(--wa-color-blue-50)
|
||||
);
|
||||
--wa-color-blue-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-50),
|
||||
var(--wa-color-blue-50)
|
||||
);
|
||||
--wa-color-blue-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-lt-60),
|
||||
var(--wa-color-blue-60)
|
||||
);
|
||||
--wa-color-blue-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-60),
|
||||
var(--wa-color-blue-60)
|
||||
);
|
||||
--wa-color-blue-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-lt-70),
|
||||
var(--wa-color-blue-70)
|
||||
);
|
||||
--wa-color-blue-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-70),
|
||||
var(--wa-color-blue-70)
|
||||
);
|
||||
|
||||
--wa-color-indigo-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
|
||||
var(--wa-color-indigo-50)
|
||||
);
|
||||
--wa-color-indigo-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
|
||||
var(--wa-color-indigo-50)
|
||||
);
|
||||
--wa-color-indigo-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
|
||||
var(--wa-color-indigo-60)
|
||||
);
|
||||
--wa-color-indigo-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
|
||||
var(--wa-color-indigo-60)
|
||||
);
|
||||
--wa-color-indigo-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
|
||||
var(--wa-color-indigo-70)
|
||||
);
|
||||
--wa-color-indigo-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
|
||||
var(--wa-color-indigo-70)
|
||||
);
|
||||
|
||||
--wa-color-purple-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-50),
|
||||
var(--wa-color-purple-50)
|
||||
);
|
||||
--wa-color-purple-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-50),
|
||||
var(--wa-color-purple-50)
|
||||
);
|
||||
--wa-color-purple-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-60),
|
||||
var(--wa-color-purple-60)
|
||||
);
|
||||
--wa-color-purple-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-60),
|
||||
var(--wa-color-purple-60)
|
||||
);
|
||||
--wa-color-purple-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-70),
|
||||
var(--wa-color-purple-70)
|
||||
);
|
||||
--wa-color-purple-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-70),
|
||||
var(--wa-color-purple-70)
|
||||
);
|
||||
|
||||
--wa-color-pink-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-lt-50),
|
||||
var(--wa-color-pink-50)
|
||||
);
|
||||
--wa-color-pink-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-50),
|
||||
var(--wa-color-pink-50)
|
||||
);
|
||||
--wa-color-pink-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-lt-60),
|
||||
var(--wa-color-pink-60)
|
||||
);
|
||||
--wa-color-pink-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-60),
|
||||
var(--wa-color-pink-60)
|
||||
);
|
||||
--wa-color-pink-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-lt-70),
|
||||
var(--wa-color-pink-70)
|
||||
);
|
||||
--wa-color-pink-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-70),
|
||||
var(--wa-color-pink-70)
|
||||
);
|
||||
|
||||
--wa-color-gray-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-lt-50),
|
||||
var(--wa-color-gray-50)
|
||||
);
|
||||
--wa-color-gray-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-50),
|
||||
var(--wa-color-gray-50)
|
||||
);
|
||||
--wa-color-gray-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-lt-60),
|
||||
var(--wa-color-gray-60)
|
||||
);
|
||||
--wa-color-gray-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-60),
|
||||
var(--wa-color-gray-60)
|
||||
);
|
||||
--wa-color-gray-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-lt-70),
|
||||
var(--wa-color-gray-70)
|
||||
);
|
||||
--wa-color-gray-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-70),
|
||||
var(--wa-color-gray-70)
|
||||
);
|
||||
|
||||
/* Text color: white if key < 60, {hue}-10 otherwise */
|
||||
|
||||
--wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
|
||||
--wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
|
||||
--wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-blue-10);
|
||||
--wa-color-danger-05: var(--wa-color-blue-05);
|
||||
--wa-color-danger: var(--wa-color-blue);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-blue-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-cyan-10);
|
||||
--wa-color-danger-05: var(--wa-color-cyan-05);
|
||||
--wa-color-danger: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-gray-10);
|
||||
--wa-color-danger-05: var(--wa-color-gray-05);
|
||||
--wa-color-danger: var(--wa-color-gray);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-gray-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-green-10);
|
||||
--wa-color-danger-05: var(--wa-color-green-05);
|
||||
--wa-color-danger: var(--wa-color-green);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-green-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-indigo-10);
|
||||
--wa-color-danger-05: var(--wa-color-indigo-05);
|
||||
--wa-color-danger: var(--wa-color-indigo);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-orange-10);
|
||||
--wa-color-danger-05: var(--wa-color-orange-05);
|
||||
--wa-color-danger: var(--wa-color-orange);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-orange-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-pink-10);
|
||||
--wa-color-danger-05: var(--wa-color-pink-05);
|
||||
--wa-color-danger: var(--wa-color-pink);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-pink-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-purple-10);
|
||||
--wa-color-danger-05: var(--wa-color-purple-05);
|
||||
--wa-color-danger: var(--wa-color-purple);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-purple-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-red-10);
|
||||
--wa-color-danger-05: var(--wa-color-red-05);
|
||||
--wa-color-danger: var(--wa-color-red);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-red-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-danger-10: var(--wa-color-yellow-10);
|
||||
--wa-color-danger-05: var(--wa-color-yellow-05);
|
||||
--wa-color-danger: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
wa-button,
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']) {
|
||||
5
packages/webawesome/src/styles/dimension/flat.css
Normal file
5
packages/webawesome/src/styles/dimension/flat.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
/* Nothing to see here */
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glossy {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
--wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3);
|
||||
--wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.1);
|
||||
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);
|
||||
@@ -1,7 +1,5 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-playful {
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button {
|
||||
@@ -1,12 +1,10 @@
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active {
|
||||
--wa-theme-active-shadow-pop-out:
|
||||
@layer wa-dimension {
|
||||
:where(:root) {
|
||||
--wa-subtle-shadow-pop-out:
|
||||
inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */,
|
||||
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
|
||||
inset 0 -0.125rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */;
|
||||
--wa-theme-active-shadow-punch-in:
|
||||
--wa-subtle-shadow-punch-in:
|
||||
inset 0 0 0 0 transparent /* shine */, inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.15) /* inner shadow */;
|
||||
|
||||
@@ -18,7 +16,7 @@
|
||||
&::part(base) {
|
||||
border-width: 0px;
|
||||
box-shadow:
|
||||
var(--wa-theme-active-shadow-pop-out),
|
||||
var(--wa-subtle-shadow-pop-out),
|
||||
inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
|
||||
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
|
||||
}
|
||||
@@ -27,14 +25,14 @@
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
box-shadow:
|
||||
var(--wa-theme-active-shadow-punch-in),
|
||||
var(--wa-subtle-shadow-punch-in),
|
||||
inset 0 0 0 var(--border-width) var(--border-color-active, var(--background-color-active, transparent));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
box-shadow: var(--wa-subtle-shadow-pop-out);
|
||||
}
|
||||
|
||||
input:not([type='button'], [type='reset'], [type='submit'], :checked),
|
||||
@@ -51,7 +49,7 @@
|
||||
|
||||
wa-slider::part(thumb),
|
||||
wa-switch::part(thumb) {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
box-shadow: var(--wa-subtle-shadow-pop-out);
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-blue-10);
|
||||
--wa-color-neutral-05: var(--wa-color-blue-05);
|
||||
--wa-color-neutral: var(--wa-color-blue);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-blue-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-cyan-10);
|
||||
--wa-color-neutral-05: var(--wa-color-cyan-05);
|
||||
--wa-color-neutral: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-05: var(--wa-color-gray-05);
|
||||
--wa-color-neutral: var(--wa-color-gray);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-gray-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-green-10);
|
||||
--wa-color-neutral-05: var(--wa-color-green-05);
|
||||
--wa-color-neutral: var(--wa-color-green);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-green-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-indigo-10);
|
||||
--wa-color-neutral-05: var(--wa-color-indigo-05);
|
||||
--wa-color-neutral: var(--wa-color-indigo);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-orange-10);
|
||||
--wa-color-neutral-05: var(--wa-color-orange-05);
|
||||
--wa-color-neutral: var(--wa-color-orange);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-orange-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-pink-10);
|
||||
--wa-color-neutral-05: var(--wa-color-pink-05);
|
||||
--wa-color-neutral: var(--wa-color-pink);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-pink-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-purple-10);
|
||||
--wa-color-neutral-05: var(--wa-color-purple-05);
|
||||
--wa-color-neutral: var(--wa-color-purple);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-purple-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-red-10);
|
||||
--wa-color-neutral-05: var(--wa-color-red-05);
|
||||
--wa-color-neutral: var(--wa-color-red);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-red-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-neutral-10: var(--wa-color-yellow-10);
|
||||
--wa-color-neutral-05: var(--wa-color-yellow-05);
|
||||
--wa-color-neutral: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-success-10: var(--wa-color-blue-10);
|
||||
--wa-color-success-05: var(--wa-color-blue-05);
|
||||
--wa-color-success: var(--wa-color-blue);
|
||||
|
||||
--wa-color-success-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-success-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-success-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-success-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-success-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-success-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-success-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-success-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-success-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-success-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-success-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-success-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-success-on: var(--wa-color-blue-on);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,23 +16,6 @@
|
||||
--wa-color-success-10: var(--wa-color-cyan-10);
|
||||
--wa-color-success-05: var(--wa-color-cyan-05);
|
||||
--wa-color-success: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-success-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-success-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-success-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-success-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-success-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-success-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-success-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-success-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-success-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-success-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-success-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-success-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-success-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user