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

rename appearance values

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-13 13:58:05 -04:00
parent 7709a63384
commit f4f56fc344
5 changed files with 109 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,36 +24,36 @@ Use the `variant` attribute to set the button's semantic variant.
### Appearance
Use the `appearance` attribute to set the button's visual appearance.
Use the `appearance` attribute to change the button's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-button appearance="solid" variant="neutral">Solid</wa-button>
<wa-button appearance="subtle" variant="neutral">Subtle</wa-button>
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
<wa-button appearance="tinted" variant="neutral">Tinted</wa-button>
<wa-button appearance="outline" variant="neutral">Outline</wa-button>
<wa-button appearance="text" variant="neutral">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="solid" variant="brand">Solid</wa-button>
<wa-button appearance="subtle" variant="brand">Subtle</wa-button>
<wa-button appearance="filled" variant="brand">Filled</wa-button>
<wa-button appearance="tinted" variant="brand">Tinted</wa-button>
<wa-button appearance="outline" variant="brand">Outline</wa-button>
<wa-button appearance="text" variant="brand">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="solid" variant="success">Solid</wa-button>
<wa-button appearance="subtle" variant="success">Subtle</wa-button>
<wa-button appearance="filled" variant="success">Filled</wa-button>
<wa-button appearance="tinted" variant="success">Tinted</wa-button>
<wa-button appearance="outline" variant="success">Outline</wa-button>
<wa-button appearance="text" variant="success">Text</wa-button>
</div>
<div style="margin-block-end: 1rem;">
<wa-button appearance="solid" variant="warning">Solid</wa-button>
<wa-button appearance="subtle" variant="warning">Subtle</wa-button>
<wa-button appearance="filled" variant="warning">Filled</wa-button>
<wa-button appearance="tinted" variant="warning">Tinted</wa-button>
<wa-button appearance="outline" variant="warning">Outline</wa-button>
<wa-button appearance="text" variant="warning">Text</wa-button>
</div>
<div>
<wa-button appearance="solid" variant="danger">Solid</wa-button>
<wa-button appearance="subtle" variant="danger">Subtle</wa-button>
<wa-button appearance="filled" variant="danger">Filled</wa-button>
<wa-button appearance="tinted" variant="danger">Tinted</wa-button>
<wa-button appearance="outline" variant="danger">Outline</wa-button>
<wa-button appearance="text" variant="danger">Text</wa-button>
</div>
@@ -110,54 +110,54 @@ Use the `prefix` and `suffix` slots to add icons.
```html {.example}
<wa-button size="small">
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
Settings
</wa-button>
<wa-button size="small">
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
Refresh
</wa-button>
<wa-button size="small">
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
Settings
</wa-button>
<wa-button>
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
Refresh
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button size="large">
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="gear" variant="filled"></wa-icon>
Settings
</wa-button>
<wa-button size="large">
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="undo" variant="filled"></wa-icon>
Refresh
</wa-button>
<wa-button size="large">
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="prefix" name="link" variant="filled"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="filled"></wa-icon>
Open
</wa-button>
```
@@ -206,7 +206,7 @@ This example demonstrates how to style buttons using a custom class. This is the
<style>
wa-button.pink::part(base) {
border-radius: 6px;
border: solid 2px;
border: filled 2px;
background: #ff1493;
border-top-color: #ff7ac1;
border-left-color: #ff7ac1;

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

@@ -534,7 +534,7 @@ hasOutline: false
<wa-radio-button value="meteor"><wa-icon name="meteor"></wa-icon></wa-radio-button>
<wa-radio-button value="cat-space"><wa-icon name="cat-space"></wa-icon></wa-radio-button>
<wa-radio-button value="puzzle-piece"><wa-icon name="puzzle-piece"></wa-icon></wa-radio-button>
<wa-button value="[choose]" variant="text" id="icon-chooser-trigger" class="logo-chooser">
<wa-button value="[choose]" appearance="text" id="icon-chooser-trigger" class="logo-chooser">
<wa-tooltip for="icon-chooser-trigger" distance="-3" hoist>Browse Icons</wa-tooltip>
<wa-icon name="ellipsis" library="fa-classic-regular"></wa-icon>
<wa-visually-hidden>Browse icons</wa-visually-hidden>

12
docs/docs/patterns/ecommerce.md
View File

@@ -26,7 +26,7 @@ TODO Page Description
<div style="font-size: small;">Off-white Jordan One</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -40,7 +40,7 @@ TODO Page Description
<div style="font-size: small;">50/50 Cotton Poly Blend</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -54,7 +54,7 @@ TODO Page Description
<div style="font-size: small;">100% Cotton</div>
<div style="display:flex; justify-content: space-between; align-items: center;">
<span>Qty: 1</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>
</section>
@@ -284,7 +284,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>
@@ -301,7 +301,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>
@@ -318,7 +318,7 @@ TODO Page Description
<div style="display: flex;justify-content: space-between;align-items: baseline;">
<span><wa-icon name="check" style="color: green; margin-right: 0.5rem;"></wa-icon> In Stock</span>
<wa-button variant="text" size="small">Remove</wa-button>
<wa-button appearance="text" size="small">Remove</wa-button>
</div>
</div>

168
src/components/button/button.styles.ts
View File

@@ -2,10 +2,17 @@ import { css } from 'lit';
export default css`
:host {
--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: initial;
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
display: inline-block;
position: relative;
@@ -14,103 +21,91 @@ export default css`
}
/*
* Solid buttons
* Filled buttons
*/
:host([appearance='solid'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([appearance='solid'][variant='success']) {
--background-color: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([appearance='solid'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([appearance='solid'][variant='neutral']) {
:host([appearance='filled'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-loud);
--label-color: var(--wa-color-neutral-on-loud);
}
:host([appearance='solid'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-loud);
--label-color: var(--wa-color-danger-on-loud);
:host([appearance='filled'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([appearance='solid']) {
--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: initial;
--border-color-hover: initial;
--border-color-active: initial;
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
:host([appearance='filled'][variant='success']) {
--background-color: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([appearance='filled'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([appearance='filled'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-loud);
--label-color: var(--wa-color-danger-on-loud);
}
/*
* Outline buttons
*/
:host([variant='brand'][appearance='outline']) {
--background-color-hover: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-loud);
--label-color: var(--wa-color-brand-on-quiet);
:host([appearance='outline']),
:host(.wa-button-group__button--radio:not([checked])) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
}
:host([variant='success'][appearance='outline']) {
--background-color-hover: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-loud);
--label-color: var(--wa-color-success-on-quiet);
}
:host([variant='neutral'][appearance='outline']),
:host([appearance='outline'][variant='neutral']),
:host(.wa-button-group__button--radio:not([checked])) {
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-loud);
--label-color: var(--wa-color-neutral-on-quiet);
}
:host([variant='warning'][appearance='outline']) {
:host([appearance='outline'][variant='brand']) {
--background-color-hover: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-loud);
--label-color: var(--wa-color-brand-on-quiet);
}
:host([appearance='outline'][variant='success']) {
--background-color-hover: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-loud);
--label-color: var(--wa-color-success-on-quiet);
}
:host([appearance='outline'][variant='warning']) {
--background-color-hover: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-loud);
--label-color: var(--wa-color-warning-on-quiet);
}
:host([variant='danger'][appearance='outline']) {
:host([appearance='outline'][variant='danger']) {
--background-color-hover: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-loud);
--label-color: var(--wa-color-danger-on-quiet);
}
:host([appearance='outline']),
:host(.wa-button-group__button--radio:not([checked])) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
}
/*
* Text buttons
*/
:host([appearance='text']) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%);
--border-color: transparent;
--border-color-active: transparent;
--border-color-hover: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
--label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active));
--label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover));
}
:host([appearance='text'][variant='neutral']) {
--label-color: var(--wa-color-neutral-on-quiet);
--background-color-hover: var(--wa-color-neutral-fill-quiet);
}
:host([appearance='text'][variant='brand']) {
--label-color: var(--wa-color-brand-on-quiet);
--background-color-hover: var(--wa-color-brand-fill-quiet);
@@ -121,11 +116,6 @@ export default css`
--background-color-hover: var(--wa-color-success-fill-quiet);
}
:host([appearance='text'][variant='neutral']) {
--label-color: var(--wa-color-neutral-on-quiet);
--background-color-hover: var(--wa-color-neutral-fill-quiet);
}
:host([appearance='text'][variant='warning']) {
--label-color: var(--wa-color-warning-on-quiet);
--background-color-hover: var(--wa-color-warning-fill-quiet);
@@ -137,42 +127,37 @@ export default css`
}
/*
* Subtle buttons
* Tinted buttons
*/
:host([appearance='subtle'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-normal);
--label-color: var(--wa-color-brand-on-normal);
:host([appearance='tinted']) {
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
}
:host([appearance='subtle'][variant='success']) {
--background-color: var(--wa-color-success-fill-normal);
--label-color: var(--wa-color-success-on-normal);
}
:host([appearance='subtle'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-normal);
--label-color: var(--wa-color-warning-on-normal);
}
:host([appearance='subtle'][variant='neutral']) {
:host([appearance='tinted'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-normal);
--label-color: var(--wa-color-neutral-on-normal);
}
:host([appearance='subtle'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-normal);
--label-color: var(--wa-color-danger-on-normal);
:host([appearance='tinted'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-normal);
--label-color: var(--wa-color-brand-on-normal);
}
:host([appearance='subtle']) {
--background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 20%);
--background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 30%);
--border-color: initial;
--border-color-hover: initial;
--border-color-active: initial;
--label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover));
--label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active));
:host([appearance='tinted'][variant='success']) {
--background-color: var(--wa-color-success-fill-normal);
--label-color: var(--wa-color-success-on-normal);
}
:host([appearance='tinted'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-normal);
--label-color: var(--wa-color-warning-on-normal);
}
:host([appearance='tinted'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-normal);
--label-color: var(--wa-color-danger-on-normal);
}
/*
@@ -181,14 +166,9 @@ export default css`
:host([checked]) {
--background-color: var(--wa-color-brand-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%);
--background-color-hover: var(--background-color);
--border-color: var(--wa-form-control-activated-color);
--border-color-active: var(--border-color);
--border-color-hover: var(--border-color);
--label-color: var(--wa-color-brand-on-normal);
--label-color-active: var(--label-color);
--label-color-hover: var(--label-color);
--indicator-color: var(--border-color);
--indicator-width: var(--wa-border-width-s);
}
@@ -288,7 +268,7 @@ export default css`
@media (forced-colors: active) {
.button.button--outline.button--checked:not(.button--disabled) {
outline: solid 2px transparent;
outline: filled 2px transparent;
}
}
@@ -463,14 +443,14 @@ export default css`
margin-inline-start: calc(-1 * var(--border-width));
}
/* Add a visual separator between solid buttons */
/* Add a visual separator between filled buttons */
:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;
bottom: 0;
border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
border-left: filled max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
z-index: 2; /* Keep separators visible on hover */
}

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

@@ -74,7 +74,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: 'solid' | 'subtle' | 'outline' | 'text' = 'solid';
@property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outline' | 'text' = 'filled';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -255,8 +255,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'button--disabled': this.disabled,
'button--focused': this.hasFocus,
'button--loading': this.loading,
'button--solid': this.appearance === 'solid',
'button--subtle': this.appearance === 'subtle',
'button--filled': this.appearance === 'filled',
'button--tinted': this.appearance === 'tinted',
'button--outline': this.appearance === 'outline',
'button--text': this.appearance === 'text',
'button--pill': this.pill,
@@ -290,7 +290,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
class="button__caret"
library="system"
name="chevron-down"
variant="solid"
variant="filled"
></wa-icon>
`
: ''