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

Rename tinted → filled

Browse Source
This commit is contained in:
Lea Verou
2024-12-18 13:11:21 -05:00
parent ba8046bff5
commit fa415005eb
14 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/base.njk
View File

@@ -98,7 +98,7 @@
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
</a>
<small id="version-number" class="only-desktop">{{ package.version }}</small>
<wa-badge variant="warning" appearance="tinted" class="only-desktop">Alpha</wa-badge>
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
</div>
<div id="docs-toolbar">

2
docs/_includes/color-scheme-selector.njk
View File

@@ -1,6 +1,6 @@
{# Color scheme selector #}
<wa-dropdown id="color-scheme-selector">
<wa-button slot="trigger" appearance="tinted" size="small" pill caret title="Press \ to toggle">
<wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
<span class="only-light">Light</span>

2
docs/_includes/preset-theme-selector.njk
View File

@@ -1,6 +1,6 @@
{# Preset theme selector #}
<wa-dropdown id="preset-theme-selector">
<wa-button slot="trigger" appearance="tinted" size="small" pill caret>
<wa-button slot="trigger" appearance="filled" size="small" pill caret>
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
<span id="preset-theme-selector__text">Default</span>
</wa-button>

20
docs/docs/components/badge.md
View File

@@ -30,36 +30,36 @@ Use the `appearance` attribute to change the badge's visual appearance.
<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="tinted outlined" variant="neutral">T+O</wa-badge>
<wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
<wa-badge appearance="filled outlined" variant="neutral">F+O</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="tinted outlined" variant="brand">T+O</wa-badge>
<wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
<wa-badge appearance="filled outlined" variant="brand">F+O</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="tinted outlined" variant="success">T+O</wa-badge>
<wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
<wa-badge appearance="filled outlined" variant="success">F+O</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="tinted outlined" variant="warning">T+O</wa-badge>
<wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
<wa-badge appearance="filled outlined" variant="warning">F+O</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="tinted outlined" variant="danger">T+O</wa-badge>
<wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
<wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>
```

4
docs/docs/components/breadcrumb.md
View File

@@ -135,7 +135,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
<wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
<wa-breadcrumb-item>
<wa-dropdown>
<wa-button slot="trigger" size="small" appearance="tinted" pill>
<wa-button slot="trigger" size="small" appearance="filled" pill>
<wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
</wa-button>
<wa-menu>
@@ -160,7 +160,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
<wa-breadcrumb-item>
Web Design
<wa-dropdown slot="suffix">
<wa-button slot="trigger" size="small" appearance="tinted" pill>
<wa-button slot="trigger" size="small" appearance="filled" pill>
<wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
</wa-button>
<wa-menu>

10
docs/docs/components/button.md
View File

@@ -30,31 +30,31 @@ Use the `appearance` attribute to change the button's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
<wa-button appearance="tinted" variant="neutral">Tinted</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">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="accent" variant="brand">Accent</wa-button>
<wa-button appearance="tinted" variant="brand">Tinted</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">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="accent" variant="success">Accent</wa-button>
<wa-button appearance="tinted" variant="success">Tinted</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">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="accent" variant="warning">Accent</wa-button>
<wa-button appearance="tinted" variant="warning">Tinted</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">Text</wa-button>
</div>
<div>
<wa-button appearance="accent" variant="danger">Accent</wa-button>
<wa-button appearance="tinted" variant="danger">Tinted</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">Text</wa-button>
</div>

10
docs/docs/essentials/button.md
View File

@@ -33,31 +33,31 @@ Use the appearance utility classes to change the button's visual appearance:
```html {.example}
<div style="margin-block-end: 1rem;">
<button class="wa-accent wa-neutral">Accent</button>
<button class="wa-tinted wa-neutral">Tinted</button>
<button class="wa-filled wa-neutral">Filled</button>
<button class="wa-outlined wa-neutral">Outlined</button>
<button class="wa-plain wa-neutral">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-accent wa-brand">Accent</button>
<button class="wa-tinted wa-brand">Tinted</button>
<button class="wa-filled wa-brand">Filled</button>
<button class="wa-outlined wa-brand">Outlined</button>
<button class="wa-plain wa-brand">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-accent wa-success">Accent</button>
<button class="wa-tinted wa-success">Tinted</button>
<button class="wa-filled wa-success">Filled</button>
<button class="wa-outlined wa-success">Outlined</button>
<button class="wa-plain wa-success">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-accent wa-warning">Accent</button>
<button class="wa-tinted wa-warning">Tinted</button>
<button class="wa-filled wa-warning">Filled</button>
<button class="wa-outlined wa-warning">Outlined</button>
<button class="wa-plain wa-warning">Text</button>
</div>
<div>
<button class="wa-accent wa-danger">Accent</button>
<button class="wa-tinted wa-danger">Tinted</button>
<button class="wa-filled wa-danger">Filled</button>
<button class="wa-outlined wa-danger">Outlined</button>
<button class="wa-plain wa-danger">Text</button>
</div>

2
docs/docs/experimental/themer.md
View File

@@ -2486,7 +2486,7 @@ hasOutline: false
</div>
<span class="name">
<b>Seraph</b>
<span class="finish">Tinted</span>
<span class="finish">Filled</span>
</span>
<wa-input type="number" value="2"></wa-input>
<span class="price">$180.00</span>

10
docs/docs/layout/frame.md
View File

@@ -56,7 +56,7 @@ Frames are well-suited for images and image placeholders.
<h3 class="wa-heading-s">White-socks</h3>
<span class="wa-body-s">Kitten &bull; Male</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-whitesocks" name="heart" variant="regular"></wa-icon-button>
<wa-tooltip for="fav-whitesocks">Favorite</wa-tooltip>
</div>
@@ -73,7 +73,7 @@ Frames are well-suited for images and image placeholders.
<h3 class="wa-heading-s">Bumpkin</h3>
<span class="wa-body-s">Adult &bull; Male</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-bumpkin" name="heart" variant="regular"></wa-icon-button>
<wa-tooltip for="fav-bumpkin">Favorite</wa-tooltip>
</div>
@@ -87,7 +87,7 @@ Frames are well-suited for images and image placeholders.
<h3 class="wa-heading-s">Swish-tail</h3>
<span class="wa-body-s">Kitten &bull; Female</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-swishtail" name="heart" variant="regular"></wa-icon-button>
<wa-tooltip for="fav-swishtail">Favorite</wa-tooltip>
</div>
@@ -101,7 +101,7 @@ Frames are well-suited for images and image placeholders.
<h3 class="wa-heading-s">Sharp-ears</h3>
<span class="wa-body-s">Adult &bull; Female</span>
<div class="wa-flank:end wa-gap-xs">
<wa-button size="small" appearance="tinted" variant="brand">Adopt this pet</wa-button>
<wa-button size="small" appearance="filled" variant="brand">Adopt this pet</wa-button>
<wa-icon-button id="fav-sharpears" name="heart" variant="regular"></wa-icon-button>
<wa-tooltip for="fav-sharpears">Favorite</wa-tooltip>
</div>
@@ -153,4 +153,4 @@ Alternatively, you can define the `border-radius` property to set custom roundin
<div></div>
</div>
</div>
```
```

12
docs/index.md
View File

@@ -374,12 +374,12 @@ layout: page
<div class="attribution">
<span>Special thanks</span>
<div class="button-list">
<wa-button appearance="tinted" pill href="https://lit.dev/">Lit</wa-button>
<wa-button appearance="tinted" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
<wa-button appearance="tinted" pill href="https://www.11ty.dev/">11ty</wa-button>
<wa-button appearance="tinted" pill href="https://floating-ui.com/">Floating UI</wa-button>
<wa-button appearance="tinted" pill href="https://animate.style/">animate.css</wa-button>
<wa-button appearance="tinted" pill href="https://lunrjs.com/">Lunr</wa-button>
<wa-button appearance="filled" pill href="https://lit.dev/">Lit</wa-button>
<wa-button appearance="filled" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
<wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
<wa-button appearance="filled" pill href="https://floating-ui.com/">Floating UI</wa-button>
<wa-button appearance="filled" pill href="https://animate.style/">animate.css</wa-button>
<wa-button appearance="filled" pill href="https://lunrjs.com/">Lunr</wa-button>
</div>
</div>
</div>

2
src/components/badge/badge.ts
View File

@@ -30,7 +30,7 @@ export default class WaBadge extends WebAwesomeElement {
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
/** The badge's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' = 'accent';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;

2
src/components/button/button.ts
View File

@@ -73,7 +73,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' | 'plain' = 'accent';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

2
src/components/radio-button/radio-button.ts
View File

@@ -159,7 +159,7 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
disabled: this.disabled,
focused: this.hasFocus,
'wa-outlined': true,
'wa-tinted': this.checked,
'wa-filled': this.checked,
'wa-pill': this.pill,
'has-label': hasLabel,
'has-prefix': hasPrefix,

4
src/styles/utilities/appearance.css
View File

@@ -24,8 +24,8 @@
}
}
.wa-tinted,
:host([appearance~='tinted']) {
.wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));