js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove custom properties that are easily styled with CSS parts (#1080)

Browse Source 
* progress, components A – C

* left behind tweaks for A – C

* all the rest

* tweaks

* remove 'accent + outlined' appearances and other tweaks

* fix overlooked docs + scouts rule

* re-add `--checked-icon-color` to radio and checkbox

* revert to `--thumb-size`

* fix theme overrides

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
This commit is contained in:
Lindsay M
2025-06-27 12:48:40 -04:00
committed by GitHub
parent 1581b99796
commit 21243729c6
69 changed files with 713 additions and 714 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/webawesome/docs/_includes/visual-tests/appearance.njk
View File

@@ -8,27 +8,6 @@
<th><code>.wa-[appearance]</code></th>
</thead>
<tbody>
<tr>
<th><code>accent</code> + <code>outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
<wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
<wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
<wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
<wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
<wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
<wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
<wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
<wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
</div>
</td>
</tr>
<tr>
<th><code>accent</code></th>
<td>

25
packages/webawesome/docs/_includes/visual-tests/native.njk
View File

@@ -17,27 +17,6 @@
<button>Button</button>
</td>
</tr>
<tr>
<th><code>accent</code> + <code>outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
<wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
<wa-button variant="success" appearance="accent outlined">Success</wa-button>
<wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
<wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<button class="wa-brand wa-accent wa-outlined">Brand</button>
<button class="wa-neutral wa-accent wa-outlined">Neutral</button>
<button class="wa-success wa-accent wa-outlined">Success</button>
<button class="wa-warning wa-accent wa-outlined">Warning</button>
<button class="wa-danger wa-accent wa-outlined">Danger</button>
</div>
</td>
</tr>
<tr>
<th><code>accent</code></th>
<td>
@@ -465,8 +444,8 @@
</wa-select>
</td>
<td>
<label class="wa-filled">Select (filled)
<select value="1">
<label>Select (filled)
<select class="wa-filled" value="1">
<option value="1">Option</option>
</select>
</label>

15
packages/webawesome/docs/docs/components/badge.md
View File

@@ -29,37 +29,32 @@ Use the `appearance` attribute to change the badge's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
<wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
<wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent outlined" variant="brand">A+O</wa-badge>
<wa-badge appearance="accent" variant="brand">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
<wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent outlined" variant="success">A+O</wa-badge>
<wa-badge appearance="accent" variant="success">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
<wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent outlined" variant="warning">A+O</wa-badge>
<wa-badge appearance="accent" variant="warning">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
<wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
<wa-badge appearance="accent outlined" variant="danger">A+O</wa-badge>
<wa-badge appearance="accent" variant="danger">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
<wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>

26
packages/webawesome/docs/docs/components/button.md
View File

@@ -30,43 +30,38 @@ Use the `appearance` attribute to change the button's visual appearance.
```html {.example}
<div class="wa-stack">
<div class="wa-gap-2xs">
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
<wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
<wa-button appearance="filled outlined" variant="neutral">Filled + Outlined</wa-button>
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
<wa-button appearance="accent" variant="brand">Accent</wa-button>
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
<wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
<wa-button appearance="filled outlined" variant="brand">Filled + Outlined</wa-button>
<wa-button appearance="filled" variant="brand">Filled</wa-button>
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
<wa-button appearance="plain" variant="brand">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
<wa-button appearance="accent" variant="success">Accent</wa-button>
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
<wa-button appearance="filled outlined" variant="success">F + O</wa-button>
<wa-button appearance="filled outlined" variant="success">Filled + Outlined</wa-button>
<wa-button appearance="filled" variant="success">Filled</wa-button>
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
<wa-button appearance="plain" variant="success">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
<wa-button appearance="accent" variant="warning">Accent</wa-button>
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
<wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
<wa-button appearance="filled outlined" variant="warning">Filled + Outlined</wa-button>
<wa-button appearance="filled" variant="warning">Filled</wa-button>
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
<wa-button appearance="plain" variant="warning">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
<wa-button appearance="accent" variant="danger">Accent</wa-button>
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
<wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
<wa-button appearance="filled outlined" variant="danger">Filled + Outlined</wa-button>
<wa-button appearance="filled" variant="danger">Filled</wa-button>
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
<wa-button appearance="plain" variant="danger">Plain</wa-button>
</div>
</div>
@@ -214,6 +209,7 @@ Use the `disabled` attribute to disable a button.
<wa-button variant="success" disabled>Success</wa-button>
<wa-button variant="neutral" disabled>Neutral</wa-button>
<wa-button variant="warning" disabled>Warning</wa-button>
<wa-button variant="danger" disabled>Danger</wa-button>
```
### Styling Buttons

20
packages/webawesome/docs/docs/components/callout.md
View File

@@ -63,16 +63,9 @@ Set the `variant` attribute to change the callout's variant.
Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
```html {.example}
<wa-callout variant="brand" appearance="outlined accent">
<wa-icon slot="icon" name="check-to-slot"></wa-icon>
This <strong>accent</strong> callout is also <strong>outlined</strong>
</wa-callout>
<br />
<wa-callout variant="brand" appearance="accent">
<wa-icon slot="icon" name="square-check"></wa-icon>
This <strong>accent</strong> callout draws attention without an outline
This <strong>accent</strong> callout draws attention
</wa-callout>
<br />
@@ -113,10 +106,16 @@ Use the `size` attribute to change a callout's size.
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This is meant to be very emphasized.
</wa-callout>
<br />
<wa-callout size="medium">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
Normal-sized callout.
</wa-callout>
<br />
<wa-callout size="small">
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
Just a small tip!
@@ -133,7 +132,4 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
### Styling
You can customize the callout's appearance mostly by setting regular CSS properties:
- `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected
- `gap` sets the space between the icon and the content
You can customize the callout's appearance mostly by setting regular CSS properties. `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected.

8
packages/webawesome/docs/docs/components/card.md
View File

@@ -141,18 +141,16 @@ Use the `appearance` attribute to change the card's visual appearance.
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
<div slot="header">Outlined (default)</div>
Card content.
Outlined (default)
</wa-card>
{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
{% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
<wa-card appearance="{{ appearance }}">
<img
slot="media"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
/>
<div slot="header">{{ appearance | capitalize }}</div>
Card content.
{{ appearance | capitalize }}
</wa-card>
{%- endfor %}
</div>

2
packages/webawesome/docs/docs/components/color-picker.md
View File

@@ -85,5 +85,5 @@ The color picker can be rendered as disabled.
Add descriptive hint to a color picker with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
```html {.example}
<wa-color-picker label="Select a color" hint="Choose a color with appropate contrast!"></wa-color-picker>
<wa-color-picker label="Select a color" hint="Choose a color with appropriate contrast!"></wa-color-picker>
```

6
packages/webawesome/docs/docs/components/copy-button.md
View File

@@ -104,9 +104,9 @@ You can customize the button to your liking with CSS.
</wa-copy-button>
<style>
.custom-styles {
--success-color: white;
--error-color: white;
.custom-styles,
.custom-styles::part(success-icon),
.custom-styles::part(error-icon) {
color: white;
}

20
packages/webawesome/docs/docs/components/skeleton.md
View File

@@ -135,19 +135,19 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
margin-right: 0.5rem;
}
.skeleton-avatars wa-skeleton:nth-child(1) {
--border-radius: 0;
.skeleton-avatars wa-skeleton:nth-child(1)::part(indicator) {
border-radius: 0;
}
.skeleton-avatars wa-skeleton:nth-child(2) {
--border-radius: var(--wa-border-radius-m);
.skeleton-avatars wa-skeleton:nth-child(2)::part(indicator) {
border-radius: var(--wa-border-radius-m);
}
</style>
```
### Custom Shapes
Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
Set a `border-radius` on the `indicator` part to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
```html {.example}
<div class="skeleton-shapes">
@@ -166,20 +166,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
}
.skeleton-shapes .square::part(indicator) {
--border-radius: var(--wa-border-radius-m);
border-radius: var(--wa-border-radius-m);
}
.skeleton-shapes .circle::part(indicator) {
--border-radius: var(--wa-border-radius-circle);
border-radius: var(--wa-border-radius-circle);
}
.skeleton-shapes .triangle::part(indicator) {
--border-radius: 0;
border-radius: 0;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
.skeleton-shapes .cross::part(indicator) {
--border-radius: 0;
border-radius: 0;
clip-path: polygon(
20% 0%,
0% 20%,
@@ -197,7 +197,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
}
.skeleton-shapes .comment::part(indicator) {
--border-radius: 0;
border-radius: 0;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

10
packages/webawesome/src/components/avatar/avatar.css
View File

@@ -1,6 +1,4 @@
:host {
--background-color: var(--wa-color-neutral-fill-normal);
--text-color: var(--wa-color-neutral-on-normal);
--size: 3rem;
display: inline-flex;
@@ -9,14 +7,14 @@
position: relative;
width: var(--size);
height: var(--size);
background-color: var(--background-color);
color: var(--wa-color-neutral-on-normal);
font: inherit;
font-size: calc(var(--size) * 0.4);
color: var(--text-color);
vertical-align: middle;
background-color: var(--wa-color-neutral-fill-normal);
border-radius: var(--wa-border-radius-circle);
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
border-radius: var(--wa-border-radius-circle);
}
:host([shape='square']) {

2
packages/webawesome/src/components/avatar/avatar.ts
View File

@@ -23,8 +23,6 @@ import styles from './avatar.css';
* @csspart initials - The container that wraps the avatar's initials.
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
*
* @cssproperty --background-color - The avatar's background color.
* @cssproperty --text-color - The color of the avatar's content.
* @cssproperty --size - The size of the avatar.
*/
@customElement('wa-avatar')

39
packages/webawesome/src/components/badge/badge.css
View File

@@ -2,22 +2,51 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.375em 0.625em;
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
font-size: max(var(--wa-font-size-2xs), 0.75em);
font-weight: var(--wa-font-weight-semibold);
line-height: 1;
background-color: var(--background-color, var(--wa-color-fill-loud));
border-color: var(--border-color, transparent);
white-space: nowrap;
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
border-radius: var(--wa-border-radius-s);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--text-color, var(--wa-color-on-loud));
white-space: nowrap;
padding: 0.375em 0.625em;
user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
/* Appearance modifiers */
:host([appearance~='plain']) {
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: transparent;
}
:host([appearance~='outlined']) {
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
}
:host([appearance~='filled']) {
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
border-color: transparent;
&:host([appearance~='outlined']) {
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
}
}
:host([appearance~='accent']) {
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
}
/* Pill modifier */
:host([pill]) {
border-radius: var(--wa-border-radius-pill);

6
packages/webawesome/src/components/badge/badge.ts
View File

@@ -1,7 +1,6 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './badge.css';
@@ -15,13 +14,10 @@ import styles from './badge.css';
*
* @csspart base - The component's base wrapper.
*
* @cssproperty --background-color - The badge's background color.
* @cssproperty --border-color - The color of the badge's border.
* @cssproperty --text-color - The color of the badge's content.
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {
static css = [variantStyles, appearanceStyles, styles];
static css = [variantStyles, styles];
/** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';

138
packages/webawesome/src/components/button/button.css
View File

@@ -1,30 +1,12 @@
@layer wa-component {
:host {
--background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
--background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
--background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
--border-color: transparent;
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--border-width: max(1px, var(--wa-form-control-border-width));
--box-shadow: initial;
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--text-color-hover: var(--text-color);
--text-color-active: var(--text-color);
display: inline-block;
position: relative;
}
}
.button {
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
@@ -44,25 +26,111 @@
height: var(--wa-form-control-height);
width: 100%;
display: inline-flex;
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
color: var(--text-color);
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
}
/* Interactive states */
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
background-color: var(--background-color-hover, var(--background-color));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--text-color-hover, var(--text-color));
/* Appearance modifiers */
:host([appearance~='plain']) {
.button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
}
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
}
.button:not(.disabled):not(.loading):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
.button:not(.disabled):not(.loading):active {
background-color: var(--background-color-active, var(--background-color));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--text-color-active, var(--text-color));
:host([appearance~='outlined']) {
.button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
}
.button:not(.disabled):not(.loading):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
:host([appearance~='filled']) {
.button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
}
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
}
.button:not(.disabled):not(.loading):active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
&:host([appearance~='outlined']) .button {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
:host([appearance~='accent']) {
.button {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
}
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
}
}
.button:not(.disabled):not(.loading):active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
}
}
/* Focus states */
@@ -192,12 +260,12 @@ button ::slotted(wa-badge) {
*/
slot[name='start']::slotted(*) {
margin-inline-end: var(--wa-form-control-padding-inline);
margin-inline-end: 0.75em;
}
slot[name='end']::slotted(*),
.button:not(.visually-hidden-label) [part~='caret'] {
margin-inline-start: var(--wa-form-control-padding-inline);
margin-inline-start: 0.75em;
}
/*

15
packages/webawesome/src/components/button/button.ts
View File

@@ -7,7 +7,6 @@ import { HasSlotController } from '../../internal/slot.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
@@ -38,22 +37,10 @@ import styles from './button.css';
* @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.
*
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
* @cssproperty --background-color - The button's background color when the button is not being interacted with.
* @cssproperty --background-color-active - The button's background color when active.
* @cssproperty --background-color-hover - The button's background color on hover.
* @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
* @cssproperty --border-color-active - The color of the button's border when active.
* @cssproperty --border-color-hover - The color of the button's border on hover.
* @cssproperty --box-shadow - The shadow effects around the edges of the button.
* @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
* @cssproperty --text-color-active - The color of the button's label when active.
* @cssproperty --text-color-hover - The color of the button's label on hover.
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static css = [styles, variantStyles, sizeStyles, appearanceStyles];
static css = [styles, variantStyles, sizeStyles];
static get validators() {
return [...super.validators, MirrorValidator()];

47
packages/webawesome/src/components/callout/callout.css
View File

@@ -1,31 +1,56 @@
:host {
--icon-color: var(--text-color);
--icon-size: var(--wa-font-size-l);
--spacing: var(--wa-space-m);
display: flex;
position: relative;
align-items: stretch;
border-radius: var(--wa-panel-border-radius);
background-color: var(--background-color, var(--wa-color-fill-quiet));
border-color: var(--border-color, transparent);
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
border-style: var(--wa-panel-border-style);
border-width: var(--wa-panel-border-width);
color: var(--wa-color-text-normal);
gap: var(--spacing);
padding: var(--spacing);
padding: 1em;
}
/* Appearance modifiers */
:host([appearance~='plain']) {
background-color: transparent;
border-color: transparent;
}
:host([appearance~='outlined']) {
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
}
:host([appearance~='filled']) {
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
border-color: transparent;
&:host([appearance~='outlined']) {
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
}
}
:host([appearance~='accent']) {
color: var(--text-color, var(--wa-color-text-normal));
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
[part~='icon'] {
color: currentColor;
}
}
[part~='icon'] {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--icon-color);
font-size: var(--icon-size);
color: var(--wa-color-on-quiet);
font-size: 1.25em;
}
::slotted([slot='icon']) {
margin-inline-end: var(--wa-form-control-padding-inline);
}
[part~='message'] {

7
packages/webawesome/src/components/callout/callout.ts
View File

@@ -1,7 +1,6 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './callout.css';
@@ -17,14 +16,10 @@ import styles from './callout.css';
*
* @csspart icon - The container that wraps the optional icon.
* @csspart message - The container that wraps the callout's main content.
*
* @cssproperty --icon-color - The color of the callout's icon.
* @cssproperty --icon-size - The size of the callout's icon.
* @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself.
*/
@customElement('wa-callout')
export default class WaCallout extends WebAwesomeElement {
static css = [variantStyles, appearanceStyles, sizeStyles, styles];
static css = [styles, variantStyles, sizeStyles];
/** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'brand' = 'brand';

55
packages/webawesome/src/components/card/card.css
View File

@@ -1,34 +1,45 @@
:host {
--spacing: var(--wa-space-l);
--border-width: var(--wa-panel-border-width);
--outlined-background-color: var(--wa-color-surface-default);
--outlined-border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-panel-border-radius);
--inner-border-radius: calc(var(--border-radius) - var(--border-width));
--inner-border-color: var(--outlined-border-color);
/* Internal calculated properties */
--inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
display: flex;
flex-direction: column;
background-color: var(--background-color, var(--wa-color-surface-default));
border-color: var(--border-color, var(--wa-color-surface-border));
border-radius: var(--border-radius);
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
border-radius: var(--wa-panel-border-radius);
border-style: var(--wa-panel-border-style);
box-shadow: var(--wa-shadow-s);
border-width: var(--border-width);
border-width: var(--wa-panel-border-width);
color: var(--wa-color-text-normal);
}
:host(:is([appearance~='accent'])) {
color: var(--text-color, var(--wa-color-text-normal));
/* Appearance modifiers */
:host([appearance~='plain']) {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
:host([appearance~='outlined']) {
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
}
:host([appearance~='filled']) {
--inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
background-color: var(--wa-color-neutral-fill-quiet);
border-color: transparent;
&:host([appearance~='outlined']) {
border-color: var(--wa-color-neutral-border-quiet);
}
}
:host([appearance='plain']) {
--inner-border-color: transparent;
box-shadow: none;
:host([appearance~='accent']) {
color: var(--wa-color-neutral-on-loud);
background-color: var(--wa-color-neutral-fill-loud);
border-color: transparent;
}
/* Take care of top and bottom radii */
@@ -47,12 +58,12 @@
.media {
display: flex;
overflow: hidden;
&::slotted(*) {
display: block;
width: 100%;
border-start-start-radius: inherit !important;
border-start-end-radius: inherit !important;
border-radius: 0;
}
}
@@ -68,8 +79,8 @@
.header {
display: block;
border-block-end-style: inherit;
border-block-end-color: var(--inner-border-color);
border-block-end-width: var(--border-width);
border-block-end-color: var(--wa-color-surface-border);
border-block-end-width: var(--wa-panel-border-width);
padding: calc(var(--spacing) / 2) var(--spacing);
}
@@ -81,8 +92,8 @@
.footer {
display: block;
border-block-start-style: inherit;
border-block-start-color: var(--inner-border-color);
border-block-start-width: var(--border-width);
border-block-start-color: var(--wa-color-surface-border);
border-block-start-width: var(--wa-panel-border-width);
padding: var(--spacing);
}

7
packages/webawesome/src/components/card/card.ts
View File

@@ -2,7 +2,6 @@ import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { HasSlotController } from '../../internal/slot.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import styles from './card.css';
@@ -22,15 +21,11 @@ import styles from './card.css';
* @csspart body - The container that wraps the card's main content.
* @csspart footer - The container that wraps the card's footer.
*
* @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
* @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
* @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
*/
@customElement('wa-card')
export default class WaCard extends WebAwesomeElement {
static css = [sizeStyles, appearanceStyles, styles];
static css = [sizeStyles, styles];
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');

11
packages/webawesome/src/components/carousel/carousel.css
View File

@@ -1,10 +1,7 @@
:host {
--aspect-ratio: 16 / 9;
--navigation-color: var(--wa-color-text-quiet);
--pagination-color: var(--wa-form-control-border-color);
--pagination-color-active: var(--wa-form-control-activated-color);
--scroll-hint: 0px;
--slide-gap: var(--wa-space-m, 1rem);
--slide-gap: var(--wa-space-m);
display: flex;
}
@@ -103,7 +100,7 @@
border: none;
border-radius: var(--wa-border-radius-m);
font-size: inherit;
color: var(--navigation-color);
color: var(--wa-color-text-quiet);
padding: var(--wa-space-xs);
cursor: pointer;
transition: var(--wa-transition-normal) color;
@@ -137,14 +134,14 @@
border-radius: var(--wa-border-radius-circle);
width: var(--wa-space-s);
height: var(--wa-space-s);
background-color: var(--pagination-color);
background-color: var(--wa-color-neutral-fill-normal);
padding: 0;
margin: 0;
transition: transform var(--wa-transition-slow);
}
.pagination-item-active {
background-color: var(--pagination-color-active);
background-color: var(--wa-form-control-activated-color);
transform: scale(1.25);
}

5
packages/webawesome/src/components/carousel/carousel.ts
View File

@@ -43,12 +43,9 @@ import styles from './carousel.css';
* @csspart navigation-button-next - Applied to the next button.
*
* @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
* @cssproperty --navigation-color - The color of the navigation arrows.
* @cssproperty --pagination-color - The color of the dots indicating the number of slides.
* @cssproperty --pagination-color-active - The color of the dot indicating the active slide.
* @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
* partially visible as a scroll hint.
* @cssproperty --slide-gap - The space between each slide.
* @cssproperty [--slide-gap=var(--wa-space-m)] - The space between each slide.
*/
@customElement('wa-carousel')
export default class WaCarousel extends WebAwesomeElement {

50
packages/webawesome/src/components/checkbox/checkbox.css
View File

@@ -1,21 +1,9 @@
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-border-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-radius: min(
calc(var(--toggle-size) * 0.375),
var(--wa-border-radius-s)
); /* min prevents entirely circular checkbox */
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.8;
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
color: var(--wa-form-control-value-color);
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
@@ -23,20 +11,22 @@
-webkit-user-select: none;
}
:host [part~='control'] {
[part~='control'] {
display: inline-flex;
flex: 0 0 auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
border-color: var(--wa-form-control-border-color);
border-radius: min(
calc(var(--wa-form-control-toggle-size) * 0.375),
var(--wa-border-radius-s)
); /* min prevents entirely circular checkbox */
border-style: var(--wa-border-style);
border-width: var(--wa-form-control-border-width);
background-color: var(--wa-form-control-background-color);
transition:
background var(--wa-transition-normal),
border-color var(--wa-transition-fast),
@@ -47,24 +37,24 @@
margin-inline-end: 0.5em;
}
:host [part~='base'] {
position: relative;
[part~='base'] {
display: flex;
align-items: flex-start;
color: var(--wa-form-control-value-color);
position: relative;
color: currentColor;
vertical-align: middle;
cursor: pointer;
}
/* Checked */
[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
[part~='control']:has(:checked, :indeterminate) {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
border-color: var(--wa-form-control-activated-color);
background-color: var(--wa-form-control-activated-color);
}
/* Focus */
[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
[part~='control']:has(> input:focus-visible:not(:disabled)) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

12
packages/webawesome/src/components/checkbox/checkbox.ts
View File

@@ -37,16 +37,8 @@ import styles from './checkbox.css';
* @csspart label - The container that wraps the checkbox's label.
* @csspart hint - The hint's wrapper.
*
* @cssproperty --background-color - The checkbox's background color.
* @cssproperty --background-color-checked - The checkbox's background color when checked.
* @cssproperty --border-color - The color of the checkbox's borders.
* @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
* @cssproperty --border-radius - The radius of the checkbox's corners.
* @cssproperty --border-style - The style of the checkbox's borders.
* @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
* @cssproperty --checked-icon-color - The color of the checkbox's icon.
* @cssproperty --toggle-size - The size of the checkbox.
* @cssproperty --checked-icon-color - The color of the checked and indeterminate icons.
* @cssproperty --checked-icon-scale - The size of the checked and indeterminate icons relative to the checkbox.
*
* @cssstate checked - Applied when the checkbox is checked.
* @cssstate disabled - Applied when the checkbox is disabled.

79
packages/webawesome/src/components/color-picker/color-picker.css
View File

@@ -1,31 +1,21 @@
:host {
--background-color: var(--wa-color-surface-raised);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--grid-width: 17rem;
--grid-height: 12rem;
--grid-handle-size: 1.25rem;
--spacing: var(--wa-space-s);
--preview-size: 2.25rem;
--preview-border-radius: var(--wa-border-radius-circle);
--slider-height: 1rem;
--slider-handle-size: calc(var(--slider-height) + 0.25rem);
--swatch-border-radius: var(--wa-border-radius-m);
--swatch-size: 1.5rem;
--trigger-border-radius: var(--wa-form-control-border-radius);
--grid-width: 17em;
--grid-height: 12em;
--grid-handle-size: 1.25em;
--slider-height: 1em;
--slider-handle-size: calc(var(--slider-height) + 0.25em);
}
.color-picker {
background-color: var(--background-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
border-color: var(--border-color);
box-shadow: var(--wa-shadow-l);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-border-radius-m);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
border-color: var(--wa-color-surface-border);
box-shadow: var(--wa-shadow-m);
color: var(--color);
font: inherit;
font-size: inherit;
user-select: none;
width: var(--grid-width);
-webkit-user-select: none;
@@ -37,8 +27,8 @@
background-image:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
border-top-left-radius: calc(var(--border-radius) - var(--border-width));
border-top-right-radius: calc(var(--border-radius) - var(--border-width));
border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
cursor: crosshair;
forced-color-adjust: none;
}
@@ -65,7 +55,7 @@
}
.controls {
padding: var(--spacing);
padding: 0.75em;
display: flex;
align-items: center;
}
@@ -83,7 +73,7 @@
}
.slider:not(:last-of-type) {
margin-bottom: var(--wa-space-s);
margin-bottom: 0.75em;
}
.slider-handle {
@@ -129,12 +119,13 @@
align-items: center;
justify-content: center;
position: relative;
width: var(--preview-size);
height: var(--preview-size);
width: 3em;
height: 3em;
border: none;
border-radius: var(--preview-border-radius);
border-radius: var(--wa-border-radius-circle);
background: none;
margin-inline-start: var(--spacing);
font-size: inherit;
margin-inline-start: 0.75em;
cursor: copy;
forced-color-adjust: none;
}
@@ -186,7 +177,7 @@
.user-input {
display: flex;
align-items: center;
padding: 0 var(--spacing) var(--spacing) var(--spacing);
padding: 0 0.75em 0.75em 0.75em;
}
.user-input wa-input {
@@ -208,7 +199,7 @@
}
.user-input wa-button-group {
margin-inline-start: var(--spacing);
margin-inline-start: 0.75em;
&::part(base) {
flex-wrap: nowrap;
@@ -216,18 +207,18 @@
}
.user-input wa-button:first-of-type {
min-width: 3rem;
max-width: 3rem;
min-width: 3em;
max-width: 3em;
}
.swatches {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr));
grid-gap: var(--wa-space-xs);
grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
grid-gap: 0.5em;
justify-items: center;
border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
var(--wa-color-surface-border);
padding: var(--spacing);
padding: 0.5em;
forced-color-adjust: none;
}
@@ -235,7 +226,7 @@
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
border-radius: var(--swatch-border-radius);
border-radius: var(--wa-border-radius-s);
}
.swatch .swatch-color {
@@ -293,9 +284,9 @@
.color-dropdown::part(panel) {
max-height: none;
background-color: var(--background-color);
border: var(--border-style) var(--border-width) var(--border-color);
border-radius: var(--border-radius);
background-color: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-m);
overflow: visible;
}
@@ -309,7 +300,7 @@
forced-color-adjust: none;
width: var(--wa-form-control-height);
height: var(--wa-form-control-height);
border-radius: var(--trigger-border-radius);
border-radius: var(--wa-form-control-border-radius);
}
.trigger:before {
@@ -322,8 +313,8 @@
border-radius: inherit;
background-color: currentColor;
box-shadow:
inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
inset 0 0 0 calc(var(--border-width) * 3) var(--wa-color-surface-default);
inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
}
.trigger-empty:before {

11
packages/webawesome/src/components/color-picker/color-picker.ts
View File

@@ -85,22 +85,11 @@ declare const EyeDropper: EyeDropperConstructor;
* @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.
* @cssproperty --border-color - The color of the color picker's borders.
* @cssproperty --border-radius - The radius of the color picker's corners.
* @cssproperty --border-style - The style of the color picker's borders.
* @cssproperty --border-width - The width of the color picker's borders.
* @cssproperty --grid-width - The width of the color grid.
* @cssproperty --grid-height - The height of the color grid.
* @cssproperty --grid-handle-size - The size of the color grid's handle.
* @cssproperty --preview-size - The size of the preview color.
* @cssproperty --preview-border-radius - The corners of the preview color.
* @cssproperty --slider-height - The height of the hue and alpha sliders.
* @cssproperty --slider-handle-size - The diameter of the slider's handle.
* @cssproperty --spacing - The amount of space around and between the color picker's controls.
* @cssproperty --swatch-border-radius - The corners of each predefined color swatch.
* @cssproperty --swatch-size - The size of each predefined color swatch.
* @cssproperty --trigger-border-radius - The corners of the color picker's dropdown trigger.
*/
@customElement('wa-color-picker')
export default class WaColorPicker extends WebAwesomeFormAssociatedElement {

8
packages/webawesome/src/components/comparison/comparison.css
View File

@@ -1,7 +1,5 @@
:host {
--divider-color: var(--wa-color-neutral-fill-quiet);
--divider-width: 0.125rem;
--handle-color: var(--wa-color-neutral-on-quiet);
--handle-size: 2.5rem;
display: block;
@@ -51,7 +49,7 @@
top: 0;
width: var(--divider-width);
height: 100%;
background-color: var(--divider-color);
background-color: var(--wa-color-surface-default);
translate: calc(var(--divider-width) / -2);
cursor: ew-resize;
}
@@ -64,10 +62,10 @@
top: calc(50% - (var(--handle-size) / 2));
width: var(--handle-size);
height: var(--handle-size);
background-color: var(--divider-color);
background-color: var(--wa-color-surface-default);
border-radius: var(--wa-border-radius-circle);
font-size: calc(var(--handle-size) * 0.4);
color: var(--handle-color);
color: var(--wa-color-neutral-on-quiet);
cursor: inherit;
z-index: 10;
}

2
packages/webawesome/src/components/comparison/comparison.ts
View File

@@ -29,9 +29,7 @@ import styles from './comparison.css';
* @csspart divider - The divider that separates the before and after content.
* @csspart handle - The handle that the user drags to expose the after content.
*
* @cssproperty --divider-color - The color of the divider.
* @cssproperty --divider-width - The width of the dividing line.
* @cssproperty --handle-color - The color of the icon used inside the handle.
* @cssproperty --handle-size - The size of the compare handle.
*
* @cssstate dragging - Applied when the comparison is being dragged.

19
packages/webawesome/src/components/copy-button/copy-button.css
View File

@@ -1,20 +1,15 @@
:host {
--background-color: transparent;
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--error-color: var(--wa-color-danger-fill-loud);
--success-color: var(--wa-color-success-fill-loud);
display: inline-block;
color: var(--wa-color-text-quiet);
color: var(--wa-color-neutral-on-quiet);
}
.button {
flex: 0 0 auto;
display: flex;
align-items: center;
background-color: var(--background-color);
background-color: transparent;
border: none;
border-radius: var(--wa-border-radius-m);
border-radius: var(--wa-form-control-border-radius);
color: inherit;
font-size: inherit;
padding: 0.5em;
@@ -24,13 +19,13 @@
@media (hover: hover) {
.button:hover:not([disabled]) {
background-color: var(--background-color-hover);
background-color: var(--wa-color-neutral-fill-quiet);
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
}
.button:focus-visible:not([disabled]) {
background-color: var(--background-color-hover);
background-color: var(--wa-color-neutral-fill-quiet);
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
}
@@ -39,11 +34,11 @@
}
slot[name='success-icon'] {
color: var(--success-color);
color: var(--wa-color-success-on-quiet);
}
slot[name='error-icon'] {
color: var(--error-color);
color: var(--wa-color-danger-on-quiet);
}
.button:focus-visible {

5
packages/webawesome/src/components/copy-button/copy-button.ts
View File

@@ -36,11 +36,6 @@ import styles from './copy-button.css';
* @csspart tooltip__base__popup - The tooltip's exported `popup` part.
* @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
* @csspart tooltip__body - The tooltip's exported `body` part.
*
* @cssproperty --background-color - The color of the button's background.
* @cssproperty --background-color-hover - The color of the button's background on hover.
* @cssproperty --success-color - The color to use for success feedback.
* @cssproperty --error-color - The color to use for error feedback.
*/
@customElement('wa-copy-button')
export default class WaCopyButton extends WebAwesomeElement {

44
packages/webawesome/src/components/details/details.css
View File

@@ -1,17 +1,11 @@
:host {
--icon-color: var(--wa-color-text-quiet);
--spacing: var(--wa-space-m);
--show-duration: 200ms;
--hide-duration: 200ms;
--outlined-border-color: var(--wa-color-surface-border);
display: block;
}
:host([appearance='plain']) {
border-radius: 0;
}
:host summary {
display: flex;
align-items: center;
@@ -38,10 +32,10 @@
details {
display: block;
overflow-anchor: none;
border: var(--wa-panel-border-width) var(--border-color) var(--wa-panel-border-style);
background-color: var(--background-color, var(--wa-color-surface-default));
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
background-color: var(--wa-color-surface-default);
border-radius: var(--wa-panel-border-radius);
color: var(--text-color, inherit);
color: var(--wa-color-text-normal);
/* Print styles */
@media print {
@@ -54,6 +48,36 @@ details {
}
}
/* Appearance modifiers */
:host([appearance~='plain']) {
details {
background-color: transparent;
border-color: transparent;
}
}
:host([appearance~='outlined']) {
details {
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
}
}
:host([appearance~='filled']) {
details {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: transparent;
}
&:host([appearance~='outlined']) details {
border-color: var(--wa-color-neutral-border-quiet);
}
}
:host([appearance='plain']) {
border-radius: 0;
}
:host([disabled]) details {
opacity: 0.5;
cursor: not-allowed;
@@ -87,7 +111,7 @@ details {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--icon-color);
color: var(--wa-color-text-quiet);
transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
}

5
packages/webawesome/src/components/details/details.ts
View File

@@ -8,7 +8,6 @@ import { animate, parseDuration } from '../../internal/animate.js';
import { getTargetElement, waitForEvent } from '../../internal/event.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import styles from './details.css';
@@ -38,15 +37,13 @@ import styles from './details.css';
* @csspart icon - The container that wraps the expand/collapse icons.
* @csspart content - The details content.
*
* @cssproperty --icon-color - The color of the details' icon.
* @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
* @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
* @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
*/
@customElement('wa-details')
export default class WaDetails extends WebAwesomeElement {
static css = [appearanceStyles, styles];
static css = styles;
private detailsObserver: MutationObserver;
private readonly localize = new LocalizeController(this);

9
packages/webawesome/src/components/dialog/dialog.css
View File

@@ -1,7 +1,4 @@
:host {
--background-color: var(--wa-color-surface-raised);
--border-radius: var(--wa-panel-border-radius);
--box-shadow: var(--wa-shadow-l);
--width: 31rem;
--spacing: var(--wa-space-l);
--show-duration: 200ms;
@@ -24,10 +21,10 @@
width: var(--width);
max-width: calc(100% - var(--wa-space-2xl));
max-height: calc(100% - var(--wa-space-2xl));
background-color: var(--background-color);
border-radius: var(--border-radius);
background-color: var(--wa-color-surface-raised);
border-radius: var(--wa-panel-border-radius);
border: none;
box-shadow: var(--box-shadow);
box-shadow: var(--wa-shadow-l);
padding: 0;
margin: auto;

3
packages/webawesome/src/components/dialog/dialog.ts
View File

@@ -45,9 +45,6 @@ import styles from './dialog.css';
* @csspart body - The dialog's body.
* @csspart footer - The dialog's footer.
*
* @cssproperty --background-color - The dialog's background color.
* @cssproperty --border-radius - The radius of the dialog's corners.
* @cssproperty --box-shadow - The shadow effects around the edges of the dialog.
* @cssproperty --spacing - The amount of space around and between the dialog's content.
* @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
* @cssproperty [--show-duration=200ms] - The animation duration when showing the dialog.

6
packages/webawesome/src/components/drawer/drawer.css
View File

@@ -1,6 +1,4 @@
:host {
--background-color: var(--wa-color-surface-raised);
--box-shadow: var(--wa-shadow-l);
--size: 25rem;
--spacing: var(--wa-space-l);
--show-duration: 200ms;
@@ -23,9 +21,9 @@
max-width: 100%;
max-height: 100%;
overflow: hidden;
background-color: var(--background-color);
background-color: var(--wa-color-surface-raised);
border: none;
box-shadow: var(--box-shadow);
box-shadow: var(--wa-shadow-l);
overflow: auto;
padding: 0;
margin: 0;

2
packages/webawesome/src/components/drawer/drawer.ts
View File

@@ -46,8 +46,6 @@ import styles from './drawer.css';
* @csspart body - The drawer's body.
* @csspart footer - The drawer's footer.
*
* @cssproperty --background-color - The drawer's background color.
* @cssproperty --box-shadow - The shadow effects around the edges of the drawer.
* @cssproperty --spacing - The amount of space around and between the drawer's content.
* @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
* depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.

7
packages/webawesome/src/components/dropdown/dropdown.ts
View File

@@ -45,13 +45,6 @@ const openDropdowns = new Set<WaDropdown>();
*
* @cssproperty --show-duration - The duration of the show animation.
* @cssproperty --hide-duration - The duration of the hide animation.
* @cssproperty --menu-background-color - The background color of the dropdown menu.
* @cssproperty --menu-border-color - The border color of the dropdown menu.
* @cssproperty --menu-border-width - The border width of the dropdown menu.
* @cssproperty --menu-border-radius - The border radius of the dropdown menu.
* @cssproperty --menu-box-shadow - The box shadow of the dropdown menu.
* @cssproperty --menu-text-color - The text color of the dropdown menu items.
* @cssproperty --menu-padding - The padding of the dropdown menu.
*/
@customElement('wa-dropdown')
export default class WaDropdown extends WebAwesomeElement {

31
packages/webawesome/src/components/input/input.css
View File

@@ -1,10 +1,4 @@
:host {
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--outlined-background-color: var(--wa-form-control-background-color);
--outlined-border-color: var(--wa-form-control-border-color);
--outlined-text-color: var(--wa-form-control-value-color);
border-width: 0;
}
@@ -16,10 +10,10 @@
position: relative;
transition: inherit;
height: var(--wa-form-control-height);
border-color: var(--border-color, var(--wa-form-control-border-color));
border-color: var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width);
border-width: var(--wa-form-control-border-width);
cursor: text;
color: var(--wa-form-control-value-color);
font-size: var(--wa-form-control-value-font-size);
@@ -33,7 +27,7 @@
border var(--wa-transition-normal),
outline var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
background-color: var(--background-color, var(--wa-form-control-background-color));
background-color: var(--wa-form-control-background-color);
box-shadow: var(--box-shadow);
padding: 0 var(--wa-form-control-padding-inline);
@@ -49,6 +43,25 @@
}
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
.text-field {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
}
:host([appearance~='filled']) {
.text-field {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
&:host([appearance~='outlined']) .text-field {
border-color: var(--wa-form-control-border-color);
}
}
:host([pill]) .text-field {
border-radius: var(--wa-border-radius-pill) !important;
}

8
packages/webawesome/src/components/input/input.ts
View File

@@ -10,7 +10,6 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/component/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
@@ -48,16 +47,11 @@ import styles from './input.css';
* @csspart password-toggle-button - The password toggle button.
* @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.
* @cssproperty --border-width - The width of the input's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the input.
*
* @cssstate blank - The input is empty.
*/
@customElement('wa-input')
export default class WaInput extends WebAwesomeFormAssociatedElement {
static css = [sizeStyles, appearanceStyles, formControlStyles, styles];
static css = [sizeStyles, formControlStyles, styles];
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };

13
packages/webawesome/src/components/option/option.css
View File

@@ -1,9 +1,4 @@
:host {
--background-color-current: var(--wa-color-brand-fill-loud);
--background-color-hover: var(--wa-color-neutral-fill-normal);
--text-color-current: var(--wa-color-brand-on-loud);
--text-color-hover: var(--wa-color-neutral-on-normal);
display: block;
color: var(--wa-color-text-normal);
-webkit-user-select: none;
@@ -25,15 +20,15 @@
@media (hover: hover) {
:host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
background-color: var(--background-color-hover);
color: var(--text-color-hover);
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-neutral-on-normal);
}
}
:host(:state(current)),
:host([disabled]:state(current)) {
background-color: var(--background-color-current);
color: var(--text-color-current);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
opacity: 1;
}

5
packages/webawesome/src/components/option/option.ts
View File

@@ -19,11 +19,6 @@ import styles from './option.css';
* @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.
* @cssproperty --text-color-current - The current option's label color.
* @cssproperty --text-color-hover - The label color on hover.
*
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart label - The option's label.
* @csspart start - The container that wraps the `start` slot.

4
packages/webawesome/src/components/popover/popover.css
View File

@@ -10,8 +10,8 @@
display: contents;
/** Defaults for inherited CSS properties */
font-size: var(--wa-popover-font-size);
line-height: var(--wa-popover-line-height);
font-size: var(--wa-font-size-m);
line-height: var(--wa-line-height-normal);
text-align: start;
white-space: normal;
}

5
packages/webawesome/src/components/progress-bar/progress-bar.css
View File

@@ -1,4 +1,5 @@
:host {
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-color: var(--wa-color-brand-fill-loud);
display: flex;
@@ -9,9 +10,9 @@
display: flex;
position: relative;
overflow: hidden;
height: 1.25rem;
height: 1rem;
border-radius: var(--wa-border-radius-pill);
background-color: var(--wa-color-neutral-fill-normal);
background-color: var(--track-color);
color: var(--wa-color-brand-on-loud);
}

2
packages/webawesome/src/components/progress-bar/progress-bar.ts
View File

@@ -19,8 +19,8 @@ import styles from './progress-bar.css';
* @csspart indicator - The progress bar's indicator.
* @csspart label - The progress bar's label.
*
* @cssproperty --track-color - The color of the track.
* @cssproperty --indicator-color - The color of the indicator.
* @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
*/
@customElement('wa-progress-bar')
export default class WaProgressBar extends WebAwesomeElement {

37
packages/webawesome/src/components/radio/radio.css
View File

@@ -1,14 +1,6 @@
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--background-color);
--border-color: var(--wa-form-control-border-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.7;
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
@@ -47,14 +39,13 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border-color: var(--border-color);
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
border-color: var(--wa-form-control-border-color);
border-radius: 50%;
border-style: var(--border-style);
border-width: var(--border-width);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
border-style: var(--wa-form-control-border-style);
border-width: var(--wa-form-control-border-width);
background-color: var(--wa-form-control-background-color);
color: transparent;
transition:
background var(--wa-transition-normal),
@@ -69,8 +60,8 @@
.checked-icon {
display: flex;
fill: currentColor;
width: var(--toggle-size);
height: var(--toggle-size);
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
}
}
@@ -78,8 +69,8 @@
/* Checked */
:host(:state(checked)) .control {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background-color: var(--background-color-checked);
border-color: var(--wa-form-control-activated-color);
background-color: var(--wa-form-control-background-color);
}
/* Focus */
@@ -99,7 +90,7 @@
align-items: center;
min-height: var(--wa-form-control-height);
background-color: var(--wa-color-surface-default);
border: var(--border-width) var(--border-style) var(--wa-form-control-border-color);
border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
border-radius: var(--wa-border-radius-m);
padding: 0 var(--wa-form-control-padding-inline);
transition:
@@ -153,7 +144,7 @@
}
:host([appearance='button']:state(checked)) {
border-color: var(--border-color-checked);
border-color: var(--wa-form-control-activated-color);
background-color: var(--wa-color-brand-fill-quiet);
}
@@ -164,11 +155,11 @@
/* Remove inner borders and handle overlap */
:host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
margin-inline-start: calc(-1 * var(--border-width));
margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
}
:host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {
margin-block-start: calc(-1 * var(--border-width));
margin-block-start: calc(-1 * var(--wa-form-control-border-width));
}
/* Ensure interactive states are visible above adjacent buttons */

10
packages/webawesome/src/components/radio/radio.ts
View File

@@ -24,16 +24,8 @@ import styles from './radio.css';
* @csspart checked-icon - The checked icon.
* @csspart label - The container that wraps the radio's label.
*
* @cssproperty --background-color - The radio's background color.
* @cssproperty --background-color-checked - The radio's background color when checked.
* @cssproperty --border-color - The color of the radio's borders.
* @cssproperty --border-color-checked - The color of the radio's borders when checked.
* @cssproperty --border-style - The style of the radio's borders.
* @cssproperty --border-width - The width of the radio's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the radio.
* @cssproperty --checked-icon-color - The color of the radio's checked icon.
* @cssproperty --checked-icon-color - The color of the checked icon.
* @cssproperty --checked-icon-scale - The size of the checked icon relative to the radio.
* @cssproperty --toggle-size - The size of the radio.
*
* @cssstate checked - Applied when the control is checked.
* @cssstate disabled - Applied when the control is disabled.

1
packages/webawesome/src/components/rating/rating.css
View File

@@ -24,6 +24,7 @@
.symbols {
display: inline-flex;
gap: 0.125em;
position: relative;
line-height: 0;
color: var(--symbol-color);

35
packages/webawesome/src/components/select/select.css
View File

@@ -1,11 +1,4 @@
label:has(select),
:host {
/* Defaults for root element. */
--outlined-background-color: var(--wa-form-control-background-color);
--outlined-border-color: var(--wa-form-control-border-color);
--outlined-text-color: var(--wa-form-control-value-color);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--tag-max-size: 10ch;
}
@@ -61,12 +54,11 @@ label:has(select),
min-height: var(--wa-form-control-height);
background-color: var(--background-color, var(--wa-form-control-background-color));
border-color: var(--border-color, var(--wa-form-control-border-color));
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
border-width: var(--wa-form-control-border-width);
color: var(--wa-form-control-value-color);
cursor: pointer;
font-family: inherit;
@@ -94,6 +86,25 @@ label:has(select),
}
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
.combobox {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
}
:host([appearance~='filled']) {
.combobox {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
&:host([appearance~='outlined']) .combobox {
border-color: var(--wa-form-control-border-color);
}
}
.display-input {
position: relative;
width: 100%;
@@ -234,7 +245,7 @@ label:has(select),
border-color: var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-m);
border-style: var(--wa-border-style);
border-width: var(--border-width);
border-width: var(--wa-border-width-s);
padding-block: 0.5em;
padding-inline: 0;
overflow: auto;

7
packages/webawesome/src/components/select/select.ts
View File

@@ -17,7 +17,6 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/component/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
@@ -75,17 +74,13 @@ import styles from './select.css';
* @csspart clear-button - The clear button.
* @csspart expand-icon - The container that wraps the expand icon.
*
* @cssproperty --background-color - The background color of the select's combobox.
* @cssproperty --border-color - The border color of the select's combobox.
* @cssproperty --border-width - The width of the select's borders, including the listbox.
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
* @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
*
* @cssstate blank - The select is empty.
*/
@customElement('wa-select')
export default class WaSelect extends WebAwesomeFormAssociatedElement {
static css = [appearanceStyles, formControlStyles, sizeStyles, styles];
static css = [styles, formControlStyles, sizeStyles];
static get validators() {
const validators = isServer

3
packages/webawesome/src/components/skeleton/skeleton.css vendored
View File

@@ -1,5 +1,4 @@
:host {
--border-radius: var(--wa-border-radius-pill);
--color: var(--wa-color-neutral-fill-normal);
--sheen-color: color-mix(in oklab, var(--color), var(--wa-color-surface-raised));
@@ -13,7 +12,7 @@
.indicator {
flex: 1 1 auto;
background: var(--color);
border-radius: var(--border-radius);
border-radius: var(--wa-border-radius-pill);
}
:host([effect='sheen']) .indicator {

1
packages/webawesome/src/components/skeleton/skeleton.ts
View File

@@ -11,7 +11,6 @@ import styles from './skeleton.css';
*
* @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
*
* @cssproperty --border-radius - The skeleton's border radius.
* @cssproperty --color - The color of the skeleton.
* @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
*/

3
packages/webawesome/src/components/split-panel/split-panel.css
View File

@@ -1,5 +1,4 @@
:host {
--divider-color: var(--wa-color-neutral-border-normal);
--divider-width: 0.25rem;
--divider-hit-area: 0.75rem;
--min: 0%;
@@ -19,7 +18,7 @@
position: relative;
align-items: center;
justify-content: center;
background-color: var(--divider-color);
background-color: var(--wa-color-neutral-border-normal);
color: var(--wa-color-neutral-on-normal);
z-index: 1;
}

1
packages/webawesome/src/components/split-panel/split-panel.ts
View File

@@ -26,7 +26,6 @@ import styles from './split-panel.css';
* @csspart panel - Targets both the start and end panels.
* @csspart divider - The divider that separates the start and end panels.
*
* @cssproperty --divider-color - The color of the divider.
* @cssproperty [--divider-width=4px] - The width of the visible divider.
* @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
* usually wider than the divider to facilitate easier dragging.

31
packages/webawesome/src/components/switch/switch.css
View File

@@ -1,17 +1,7 @@
:host {
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-border-color);
--border-color-checked: var(--background-color-checked);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--height: var(--wa-form-control-toggle-size);
--thumb-color: var(--wa-form-control-border-color);
--thumb-color-checked: var(--wa-form-control-background-color);
--thumb-shadow: initial;
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
--width: calc(var(--height) * 1.75);
--thumb-size: 0.75em;
display: inline-flex;
line-height: var(--wa-form-control-value-line-height);
@@ -35,23 +25,22 @@ label {
justify-content: center;
width: var(--width);
height: var(--height);
background-color: var(--background-color);
border-color: var(--border-color);
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-radius: var(--height);
border-style: var(--border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
border-style: var(--wa-form-control-border-style);
border-width: var(--wa-form-control-border-width);
transition-property: translate, background, border-color, box-shadow;
transition-duration: var(--wa-transition-normal);
transition-timing-function: var(--wa-transition-easing);
}
.switch .thumb {
aspect-ratio: 1 / 1;
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--thumb-color);
background-color: var(--wa-form-control-border-color);
border-radius: 50%;
box-shadow: var(--thumb-shadow);
translate: calc((var(--width) - var(--height)) / -2);
transition: inherit;
}
@@ -72,12 +61,12 @@ label:not(.disabled) .input:focus-visible ~ .switch .thumb {
/* Checked */
.checked .switch {
background-color: var(--background-color-checked);
border-color: var(--border-color-checked);
background-color: var(--wa-form-control-activated-color);
border-color: var(--wa-form-control-activated-color);
}
.checked .switch .thumb {
background-color: var(--thumb-color-checked);
background-color: var(--wa-color-surface-default);
translate: calc((var(--width) - var(--height)) / 2);
}

14
packages/webawesome/src/components/switch/switch.ts
View File

@@ -33,19 +33,9 @@ import styles from './switch.css';
* @csspart label - The switch's label.
* @csspart hint - The hint's wrapper.
*
* @cssproperty --background-color - The switch's background color.
* @cssproperty --background-color-checked - The switch's background color when checked.
* @cssproperty --border-color - The color of the switch's borders.
* @cssproperty --border-color-checked - The color of the switch's borders when checked.
* @cssproperty --border-style - The style of the switch's borders.
* @cssproperty --border-width - The width of the switch's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the switch.
* @cssproperty --height - The height of the switch.
* @cssproperty --thumb-color - The color of the thumb.
* @cssproperty --thumb-color-checked - The color of the thumb when checked.
* @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
* @cssproperty --thumb-size - The size of the thumb.
* @cssproperty --width - The width of the switch.
* @cssproperty --height - The height of the switch.
* @cssproperty --thumb-size - The size of the thumb.
*/
@customElement('wa-switch')
export default class WaSwitch extends WebAwesomeFormAssociatedElement {

5
packages/webawesome/src/components/tab/tab.css
View File

@@ -1,5 +1,4 @@
:host {
--active-tab-color: var(--wa-color-brand-on-quiet);
display: inline-block;
color: var(--wa-color-neutral-on-quiet);
font-weight: var(--wa-font-weight-action);
@@ -40,8 +39,8 @@
outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
}
:host([active]:not([disabled])) .tab {
color: var(--active-tab-color);
:host([active]:not([disabled])) {
color: var(--wa-color-brand-on-quiet);
}
:host([disabled]) .tab {

2
packages/webawesome/src/components/tab/tab.ts
View File

@@ -15,8 +15,6 @@ let id = 0;
*
* @slot - The tab's label.
*
* @cssproperty --active-tab-color - The color of the active tab's label.
*
* @csspart base - The component's base wrapper.
*/
@customElement('wa-tab')

29
packages/webawesome/src/components/tag/tag.css
View File

@@ -4,11 +4,11 @@
gap: 0.5em;
border-radius: var(--wa-border-radius-m);
align-items: center;
background-color: var(--background-color, var(--wa-color-fill-quiet));
border-color: var(--border-color, transparent);
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--text-color, var(--wa-color-on-normal));
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
font-size: inherit;
line-height: 1;
white-space: nowrap;
@@ -18,6 +18,29 @@
line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
padding: 0 0.75em;
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
:host([appearance~='filled']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
border-color: transparent;
&:host([appearance~='outlined']) {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
:host([appearance~='accent']) {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
}
}
.content {

3
packages/webawesome/src/components/tag/tag.ts
View File

@@ -2,7 +2,6 @@ import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { WaRemoveEvent } from '../../events/remove.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
@@ -28,7 +27,7 @@ import styles from './tag.css';
*/
@customElement('wa-tag')
export default class WaTag extends WebAwesomeElement {
static css = [styles, variantStyles, sizeStyles, appearanceStyles];
static css = [styles, variantStyles, sizeStyles];
private readonly localize = new LocalizeController(this);

32
packages/webawesome/src/components/textarea/textarea.css
View File

@@ -1,10 +1,4 @@
:host {
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--outlined-background-color: var(--wa-form-control-background-color);
--outlined-border-color: var(--wa-form-control-border-color);
--outlined-text-color: var(--wa-form-control-value-color);
border-width: 0;
}
@@ -17,12 +11,11 @@
outline: none;
cursor: inherit;
font: inherit;
background-color: var(--background-color, var(--wa-form-control-background-color));
border-color: var(--border-color, var(--wa-form-control-border-color));
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
border-width: var(--wa-form-control-border-width);
-webkit-appearance: none;
&:focus-within {
@@ -31,6 +24,25 @@
}
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
.textarea {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
}
:host([appearance~='filled']) {
.textarea {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
&:host([appearance~='outlined']) .textarea {
border-color: var(--wa-form-control-border-color);
}
}
textarea {
display: block;
width: 100%;

8
packages/webawesome/src/components/textarea/textarea.ts
View File

@@ -9,7 +9,6 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
import formControlStyles from '../../styles/component/form-control.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import styles from './textarea.css';
@@ -34,16 +33,11 @@ import styles from './textarea.css';
* @csspart textarea - The internal `<textarea>` control.
* @csspart base - The wrapper around the `<textarea>` control.
*
* @cssproperty --background-color - The textarea's background color.
* @cssproperty --border-color - The color of the textarea's borders.
* @cssproperty --border-width - The width of the textarea's borders.
* @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
*
* @cssstate blank - The textarea is empty.
*/
@customElement('wa-textarea')
export default class WaTextarea extends WebAwesomeFormAssociatedElement {
static css = [formControlStyles, appearanceStyles, sizeStyles, styles];
static css = [styles, formControlStyles, sizeStyles];
static get validators() {
return [...super.validators, MirrorValidator()];

9
packages/webawesome/src/components/tooltip/tooltip.css
View File

@@ -1,8 +1,5 @@
:host {
--background-color: var(--wa-tooltip-background-color);
--border-radius: var(--wa-tooltip-border-radius);
--max-width: 30ch;
--padding: 0.25em 0.5em;
/** These styles are added so we don't interfere in the DOM. */
display: inline-block;
@@ -45,9 +42,9 @@
display: block;
width: max-content;
max-width: var(--max-width);
border-radius: var(--border-radius);
background-color: var(--background-color);
padding: var(--padding);
border-radius: var(--wa-tooltip-border-radius);
background-color: var(--wa-tooltip-background-color);
padding: 0.25em 0.5em;
user-select: none;
-webkit-user-select: none;
}

3
packages/webawesome/src/components/tooltip/tooltip.ts
View File

@@ -33,10 +33,7 @@ import styles from './tooltip.css';
* @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
* @csspart body - The tooltip's body where its content is rendered.
*
* @cssproperty --background-color - The tooltip's background color.
* @cssproperty --border-radius - The radius of the tooltip's corners.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
* @cssproperty --padding - The padding within the tooltip.
*/
@customElement('wa-tooltip')
export default class WaTooltip extends WebAwesomeElement {

11
packages/webawesome/src/components/tree-item/tree-item.css
View File

@@ -1,7 +1,4 @@
:host {
--selection-background-color: var(--wa-color-neutral-fill-quiet);
--selection-indicator-color: var(--wa-color-brand-fill-loud);
--expand-button-color: var(--wa-color-text-quiet);
--show-duration: 200ms;
--hide-duration: 200ms;
@@ -57,7 +54,7 @@ slot:not([name])::slotted(wa-icon) {
display: flex;
align-items: center;
justify-content: center;
color: var(--expand-button-color);
color: var(--wa-color-text-quiet);
width: 2em;
height: 2em;
flex-shrink: 0;
@@ -108,12 +105,12 @@ slot:not([name])::slotted(wa-icon) {
}
:host(:not([aria-disabled='true'])) .tree-item-selected .item {
background-color: var(--selection-background-color);
border-inline-start-color: var(--selection-indicator-color);
background-color: var(--wa-color-neutral-fill-quiet);
border-inline-start-color: var(--wa-color-brand-fill-loud);
}
:host(:not([aria-disabled='true'])) .expand-button {
color: var(--expand-button-color);
color: var(--wa-color-text-quiet);
}
.label {

3
packages/webawesome/src/components/tree-item/tree-item.ts
View File

@@ -57,9 +57,6 @@ import styles from './tree-item.css';
* @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
* @csspart checkbox__label - The checkbox's exported `label` part.
*
* @cssproperty --selection-background-color - The background color of selected tree items.
* @cssproperty --selection-indicator-color - The color the indicator for selected tree items.
* @cssproperty --expand-button-color - The color of the expand button.
* @cssproperty [--show-duration=200ms] - The animation duration when expanding tree items.
* @cssproperty [--hide-duration=200ms] - The animation duration when collapsing tree items.
*

132
packages/webawesome/src/styles/native.css
View File

@@ -557,10 +557,6 @@
input[type='button'],
input[type='reset'],
input[type='submit'] {
--background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
--border-color: transparent;
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
display: inline-flex;
align-items: center;
justify-content: center;
@@ -569,7 +565,7 @@
height: var(--wa-form-control-height);
padding: 0 var(--wa-form-control-padding-inline);
color: var(--text-color);
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-font-weight-action);
@@ -578,8 +574,8 @@
vertical-align: middle;
white-space: nowrap;
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
border-style: var(--wa-border-style);
border-width: max(1px, var(--wa-form-control-border-width));
border-radius: var(--wa-form-control-border-radius);
@@ -592,18 +588,94 @@
user-select: none;
-webkit-user-select: none;
&:not(:disabled):hover {
background-color: var(
--background-color-hover,
color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover))
);
&.wa-plain {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: transparent;
&:not(:disabled):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(:disabled):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
&:not(:disabled):active {
background-color: var(
--background-color-active,
color-mix(in oklab, var(--background-color), var(--wa-color-mix-active))
);
&.wa-outlined {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
&:not(:disabled):hover {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
}
&:not(:disabled):active {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: color-mix(
in oklab,
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
var(--wa-color-mix-active)
);
}
}
&.wa-filled {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: transparent;
&:not(:disabled):hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
&:not(:disabled):active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
&.wa-outlined {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
}
&.wa-accent {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;
&:not(:disabled):hover {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-hover)
);
}
&:not(:disabled):active {
background-color: color-mix(
in oklab,
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
var(--wa-color-mix-active)
);
}
}
&:focus {
@@ -794,10 +866,10 @@
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
background-color: var(--background-color, var(--wa-form-control-background-color));
border-color: var(--border-color, var(--wa-form-control-border-color));
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width, var(--wa-form-control-border-width));
border-width: var(--wa-form-control-border-width);
border-radius: var(--wa-form-control-border-radius);
transition:
@@ -830,6 +902,20 @@
cursor: not-allowed;
}
&.wa-outlined {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
&.wa-filled {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
&.wa-outlined {
border-color: var(--wa-form-control-border-color);
}
}
&.wa-pill {
border-radius: var(--wa-border-radius-pill);
}
@@ -870,10 +956,12 @@
input[type='color'] {
display: block;
width: var(--wa-form-control-height);
height: var(--wa-form-control-height);
block-size: var(--wa-form-control-height);
inline-size: var(--wa-form-control-height);
padding: calc(var(--wa-form-control-border-width) * 2);
font-size: 1em;
background: transparent;
border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
border-radius: var(--wa-form-control-border-radius);

132
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -364,60 +364,56 @@
.wa-theme-awesome {
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {
&:not([appearance='plain'], .wa-plain) {
--wa-color-shadow: var(--wa-color-border-normal);
--wa-transition-slow: 0;
--wa-transition-normal: 0;
--wa-transition-fast: 0;
input[type='button'],
input[type='reset'],
input[type='submit'] {
--wa-color-shadow: var(--wa-color-border-normal);
--wa-transition-slow: 0;
--wa-transition-normal: 0;
--wa-transition-fast: 0;
--background-color-active: var(--border-color-active);
--border-color-hover: var(--wa-color-shadow);
--border-color-active: var(--wa-color-shadow);
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
.wa-dark &,
.wa-invert & {
--wa-color-shadow: var(--wa-color-border-quiet);
}
}
&[appearance='filled'],
&.wa-filled {
.wa-dark & {
--wa-color-shadow: var(--wa-color-border-quiet);
}
&[appearance~='outlined'],
&.wa-outlined {
--wa-color-shadow: var(--border-color);
--border-color: oklab(from var(--background-color) calc(l - 0.07) a b);
--text-color-active: var(--background-color);
--outlined-background-color: var(--wa-color-surface-default);
.wa-dark &,
.wa-invert & {
--border-color: var(--wa-color-border-quiet);
--text-color-active: var(--wa-color-on-quiet);
}
&[appearance='outlined'],
&.wa-outlined:not(.wa-filled) {
--wa-color-shadow: var(--wa-color-border-loud);
}
}
:is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not(
[appearance='plain'],
.wa-plain
) {
&:where(:not(wa-button)),
&::part(base) {
height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
margin-bottom: var(--wa-shadow-offset-y-s);
margin-right: var(--wa-shadow-offset-x-s);
}
&:not([disabled], [loading]):active {
wa-button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
&:not([appearance~='plain']):not(.wa-plain) {
&:where(:not(wa-button)),
&::part(base) {
box-shadow: none;
transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
margin-bottom: var(--wa-shadow-offset-y-s);
margin-right: var(--wa-shadow-offset-x-s);
box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
}
&:not([disabled]):not(:disabled):active {
&:where(:not(wa-button)),
&::part(base) {
color: var(--wa-color-fill-normal);
background-color: var(--wa-color-shadow);
border-color: var(--wa-color-shadow);
box-shadow: none;
transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
}
}
}
.wa-dark & {
&:not([appearance~='plain']):not(.wa-plain) {
&:not([disabled]):not(:disabled):active {
&:where(:not(wa-button)),
&::part(base) {
color: var(--wa-color-fill-loud);
}
}
}
}
}
@@ -461,27 +457,42 @@
wa-input,
wa-select,
wa-textarea
):not(:focus, [appearance='filled']) {
--box-shadow: inset var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--border-width)) 0 0
var(--wa-color-shadow);
):not(:focus):not([appearance='filled']) {
&:where(:not(wa-input):not(wa-select):not(wa-textarea)),
&:where(wa-input)::part(input),
&:where(wa-select)::part(combobox),
&:where(wa-textarea)::part(base) {
box-shadow: inset var(--wa-shadow-offset-x-s)
max(var(--wa-shadow-offset-y-s), var(--wa-form-control-border-width)) 0 0 var(--wa-color-shadow);
}
}
}
}
@layer wa-theme-overrides {
.wa-theme-awesome {
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
[appearance='plain'],
.wa-plain
) {
&[appearance~='outlined'],
&.wa-outlined {
--border-color: var(--text-color);
wa-button,
button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
&[appearance='accent'],
&.wa-accent {
&:where(:not(wa-button)),
&::part(base) {
--wa-color-shadow: currentColor;
border-color: currentColor;
}
}
.wa-dark &,
.wa-invert & {
--border-color: var(--wa-color-border-quiet);
--text-color-active: var(--wa-color-on-quiet);
.wa-dark & {
&[appearance='accent'],
&.wa-accent {
&:where(:not(wa-button)),
&::part(base) {
--wa-color-shadow: var(--wa-color-border-quiet);
border-color: var(--wa-color-border-quiet);
}
}
}
}
@@ -496,9 +507,6 @@
&:is([appearance~='outlined']) {
border-color: var(--wa-color-border-normal);
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-border-normal);
}
}
wa-card {

40
packages/webawesome/src/styles/themes/shoelace.css
View File

@@ -362,8 +362,8 @@
@layer wa-theme-overrides {
.wa-theme-shoelace {
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--text-color: var(--wa-color-neutral-on-loud);
background-color: var(--wa-color-neutral-fill-loud);
color: var(--wa-color-neutral-on-loud);
}
wa-button::part(label),
@@ -387,21 +387,13 @@
}
wa-callout {
--spacing: var(--wa-space-m);
padding: var(--wa-space-m);
font-size: var(--wa-font-size-smaller);
&:is([appearance~='outlined']) {
border-top-width: var(--wa-border-width-l);
border-color: var(--wa-color-surface-border);
border-top-color: var(--border-color, var(--wa-color-border-loud));
&:not([appearance~='accent']) {
--border-color: var(--wa-color-fill-loud);
}
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-fill-loud);
--text-color: var(--wa-color-text-normal);
}
}
@@ -409,10 +401,6 @@
background-color: var(--wa-color-surface-raised);
}
wa-carousel {
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
:is(
wa-input,
wa-select,
@@ -455,18 +443,26 @@
}
wa-switch {
--background-color: var(--wa-color-gray-50);
--border-color: var(--background-color);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
--thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--wa-form-control-border-width) * 2);
--thumb-size: calc(var(--height) + 0.25em);
--width: calc(var(--height) * 2);
&::part(control) {
background-color: var(--wa-color-gray-50);
border-color: var(--wa-color-gray-50);
}
&[checked]::part(control) {
background-color: var(--wa-form-control-activated-color);
border-color: var(--wa-form-control-activated-color);
}
&::part(thumb) {
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
background-color: var(--wa-color-surface-default);
border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
}
&[checked]::part(thumb) {
border-color: var(--background-color-checked);
border-color: var(--wa-form-control-activated-color);
}
}

1
packages/webawesome/src/styles/utilities.css
View File

@@ -10,4 +10,3 @@
@import url('utilities/size.css');
@import url('utilities/variants.css');
@import url('utilities/appearance.css');

59
packages/webawesome/src/styles/utilities/appearance.css
View File

@@ -1,59 +0,0 @@
@layer wa-utilities {
/* :where() has no specificity, ensuring these initial values can be overridden by the intended class */
:is(button, input, select, textarea):where(.wa-filled, .wa-plain, .wa-accent, .wa-outlined),
:host {
--border-color: transparent;
--outlined-border-color: initial;
--outlined-border-color-hover: initial;
--outlined-text-color: initial;
--outlined-text-color-hover: initial;
}
:is(button, input, select, textarea).wa-outlined,
:host([appearance~='outlined']) {
--background-color: var(--outlined-background-color, transparent);
--background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
--background-color-active: var(
--outlined-background-color-active,
color-mix(in oklab, var(--background-color-hover), transparent 20%)
);
--border-color: var(--outlined-border-color, var(--wa-color-border-loud));
--border-color-hover: var(--outlined-border-color-hover, var(--wa-color-border-loud));
--text-color: var(--outlined-text-color, var(--wa-color-on-quiet));
--text-color-hover: var(--outlined-text-color-hover, var(--text-color));
}
:is(button, input[type='button'], input[type='reset'], input[type='submit']).wa-accent,
:host([appearance~='accent']) {
--background-color: var(--wa-color-fill-loud);
--background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
--background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
--outlined-border-color: color-mix(in oklab, var(--wa-color-fill-loud), oklab(0% none none / none) 20%);
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
}
:is(button, input, select, textarea).wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
--background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
--outlined-border-color: var(--wa-color-border-normal);
--text-color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
--text-color-hover: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
}
:is(button, input[type='button'], input[type='reset'], input[type='submit']).wa-plain,
:host([appearance~='plain']) {
--background-color: transparent;
--background-color-hover: var(--wa-color-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
--text-color: var(--wa-color-on-quiet);
}
}