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

Rename filled → accent (rel #330)

Browse Source
This commit is contained in:
Lea Verou
2024-12-18 12:58:06 -05:00
parent f5ed55513b
commit dbab4ae645
7 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,36 +28,36 @@ Use the `appearance` attribute to change the badge's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
<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="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
<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="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
<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="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
<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="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
<wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<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="outlined" variant="danger">Outlined</wa-badge>

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

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

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

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

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: 'filled' | 'tinted' | 'outlined' = 'filled';
@property({ reflect: true }) appearance: 'accent' | 'tinted' | '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: 'filled' | 'tinted' | 'outlined' | 'plain' = 'filled';
@property({ reflect: true }) appearance: 'accent' | 'tinted' | 'outlined' | 'plain' = 'accent';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

6
src/styles/native/input.css
View File

@@ -22,9 +22,9 @@
--box-shadow: initial;
}
/* Set custom properties for filled input variants via class="wa-filled" or <wa-input filled> */
input:where(:not(:host input)).wa-filled:where(&),
:host(.wa-filled:where(&)),
/* Set custom properties for filled input variants via class="wa-accent" or <wa-input filled> */
input:where(:not(:host input)).wa-accent:where(&),
:host(.wa-accent:where(&)),
:host([filled]:where(&)) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);

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

@@ -11,8 +11,8 @@
--text-color-hover: var(--wa-color-on-quiet);
}
.wa-filled,
:host([appearance~='filled']) {
.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));