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 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>