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

Merge pull request #128 from shoelace-style/button-appearances

Browse Source 
Add new button appearances
This commit is contained in:
Cory LaViska
2024-06-17 13:39:04 -04:00
committed by GitHub
parent 4adfcecb80 a388cd30e0
commit 47d0184ed8
16 changed files with 206 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/_includes/base.njk
View File

@@ -43,6 +43,11 @@
<wa-page>
<header slot="header">
{# Nav toggle #}
<wa-button appearance="text" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>
{# Logo #}
<div id="docs-branding">
{# Nav toggle #}
@@ -60,7 +65,7 @@
<div id="docs-toolbar">
{# Color scheme selector #}
<wa-dropdown id="color-scheme-selector">
<wa-button slot="trigger" size="small" pill caret title="Press \ to toggle">
<wa-button slot="trigger" appearance="tinted" 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 only-desktop">Light</span>
@@ -75,7 +80,7 @@
</wa-dropdown>
{# Search #}
<wa-button id="search-trigger" outline size="small" data-search>
<wa-button id="search-trigger" appearance="outline" size="small" data-search>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
Search
<kbd slot="suffix" class="only-desktop">/</kbd>

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

@@ -12,16 +12,53 @@ layout: component.njk
### Variants
Use the `variant` attribute to set the button's variant.
Use the `variant` attribute to set the button's semantic variant.
```html {.example}
<wa-button variant="neutral">Neutral</wa-button>
<wa-button variant="brand">Brand</wa-button>
<wa-button variant="success">Success</wa-button>
<wa-button variant="neutral">Neutral</wa-button>
<wa-button variant="warning">Warning</wa-button>
<wa-button variant="danger">Danger</wa-button>
```
### Appearance
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="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="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="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="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="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>
```
### Sizes
Use the `size` attribute to change a button's size.
@@ -32,18 +69,6 @@ Use the `size` attribute to change a button's size.
<wa-button size="large">Large</wa-button>
```
### Outline Buttons
Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
```html {.example}
<wa-button variant="brand" outline>Brand</wa-button>
<wa-button variant="success" outline>Success</wa-button>
<wa-button variant="neutral" outline>Neutral</wa-button>
<wa-button variant="warning" outline>Warning</wa-button>
<wa-button variant="danger" outline>Danger</wa-button>
```
### Pill Buttons
Use the `pill` attribute to give buttons rounded edges.
@@ -54,16 +79,6 @@ Use the `pill` attribute to give buttons rounded edges.
<wa-button size="large" pill>Large</wa-button>
```
### Text Buttons
Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
```html {.example}
<wa-button variant="text" size="small">Text</wa-button>
<wa-button variant="text" size="medium">Text</wa-button>
<wa-button variant="text" size="large">Text</wa-button>
```
### Link Buttons
It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.

42
docs/docs/experimental/sandbox.md
View File

@@ -100,13 +100,13 @@ layout: page.njk
<wa-button variant="warning">Warning</wa-button>
<wa-button variant="danger">Danger</wa-button>
<br /><br />
<wa-button variant="brand" outline>Brand</wa-button>
<wa-button variant="success" outline>Success</wa-button>
<wa-button variant="neutral" outline>Neutral</wa-button>
<wa-button variant="warning" outline>Warning</wa-button>
<wa-button variant="danger" outline>Danger</wa-button>
<wa-button variant="brand" appearance="outline">Brand</wa-button>
<wa-button variant="success" appearance="outline">Success</wa-button>
<wa-button variant="neutral" appearance="outline">Neutral</wa-button>
<wa-button variant="warning" appearance="outline">Warning</wa-button>
<wa-button variant="danger" appearance="outline">Danger</wa-button>
<br /><br />
<wa-button variant="text">Brand</wa-button>
<wa-button appearance="text">Text</wa-button>
<br /><br />
<wa-radio-group label="Radio button group" name="a" value="1">
<wa-radio-button value="1">Option 1</wa-radio-button>
@@ -215,40 +215,40 @@ layout: page.njk
</wa-button>
<br /><br />
<wa-button-group label="Alignment">
<wa-button outline variant="brand">Left</wa-button>
<wa-button outline variant="brand">Center</wa-button>
<wa-button outline variant="brand">Right</wa-button>
<wa-button appearance="outline" variant="brand">Left</wa-button>
<wa-button appearance="outline" variant="brand">Center</wa-button>
<wa-button appearance="outline" variant="brand">Right</wa-button>
</wa-button-group>
<br /><br />
<wa-button-group label="Alignment">
<wa-button outline variant="success">Left</wa-button>
<wa-button outline variant="success">Center</wa-button>
<wa-button outline variant="success">Right</wa-button>
<wa-button appearance="outline" variant="success">Left</wa-button>
<wa-button appearance="outline" variant="success">Center</wa-button>
<wa-button appearance="outline" variant="success">Right</wa-button>
</wa-button-group>
<br /><br />
<wa-button-group label="Alignment">
<wa-button outline>Left</wa-button>
<wa-button outline>Center</wa-button>
<wa-button outline>Right</wa-button>
<wa-button appearance="outline">Left</wa-button>
<wa-button appearance="outline">Center</wa-button>
<wa-button appearance="outline">Right</wa-button>
</wa-button-group>
<br /><br />
<wa-button-group label="Alignment">
<wa-button outline variant="warning">Left</wa-button>
<wa-button outline variant="warning">Center</wa-button>
<wa-button outline variant="warning">Right</wa-button>
<wa-button appearance="outline" variant="warning">Left</wa-button>
<wa-button appearance="outline" variant="warning">Center</wa-button>
<wa-button appearance="outline" variant="warning">Right</wa-button>
</wa-button-group>
<br /><br />
<wa-button-group label="Alignment">
<wa-button outline variant="danger">Left</wa-button>
<wa-button outline variant="danger">Center</wa-button>
<wa-button outline variant="danger">Right</wa-button>
<wa-button appearance="outline" variant="danger">Left</wa-button>
<wa-button appearance="outline" variant="danger">Center</wa-button>
<wa-button appearance="outline" variant="danger">Right</wa-button>
</wa-button-group>
```

8
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>
@@ -2040,7 +2040,7 @@ hasOutline: false
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
Add to Cart
</wa-button>
<wa-button size="small" outline>
<wa-button size="small" appearance="outline">
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
Save
</wa-button>
@@ -2063,7 +2063,7 @@ hasOutline: false
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
Add to Cart
</wa-button>
<wa-button size="small" outline>
<wa-button size="small" appearance="outline">
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
Save
</wa-button>
@@ -2085,7 +2085,7 @@ hasOutline: false
<wa-icon slot="prefix" name="plus" variant="regular"></wa-icon>
Add to Cart
</wa-button>
<wa-button size="small" outline>
<wa-button size="small" appearance="outline">
<wa-icon slot="prefix" name="bookmark" variant="regular"></wa-icon>
Save
</wa-button>

16
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>
@@ -469,8 +469,8 @@ TODO Page Description
<span>$95.00</span>
</span>
<span style="display: grid;grid-template-columns: 1fr 1fr;column-gap: 1rem;">
<wa-button variant="neutral" outline>View Order</wa-button>
<wa-button variant="neutral" outline>View Invoice</wa-button>
<wa-button variant="neutral" appearance="outline">View Order</wa-button>
<wa-button variant="neutral" appearance="outline">View Invoice</wa-button>
</span>
</div>
<div>

172
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,99 +21,141 @@ export default css`
}
/*
* Standard buttons
* Filled buttons
*/
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
:host([appearance='filled'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-loud);
--label-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
:host([appearance='filled'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
: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);
}
:host(:not([variant='text'])) {
--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);
/*
* Tinted buttons
*/
: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='tinted'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-normal);
--label-color: var(--wa-color-neutral-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='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);
}
/*
* Outline buttons
*/
:host([variant='brand'][outline]) {
--background-color-hover: var(--wa-color-brand-fill-quiet);
--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'][outline]) {
--background-color-hover: var(--wa-color-success-fill-quiet);
--label-color: var(--wa-color-success-on-quiet);
}
:host([variant='neutral'][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'][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'][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([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: color-mix(in oklab, var(--label-color), 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([variant='text']) {
--background-color: none;
--background-color-active: none;
--background-color-hover: none;
--border-color: transparent;
--border-color-active: transparent;
--border-color-hover: transparent;
--label-color: var(--wa-color-text-link);
--label-color-active: var(--wa-color-text-link);
--label-color-hover: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
:host([appearance='text']) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
}
: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);
}
:host([appearance='text'][variant='success']) {
--label-color: var(--wa-color-success-on-quiet);
--background-color-hover: var(--wa-color-success-fill-quiet);
}
:host([appearance='text'][variant='warning']) {
--label-color: var(--wa-color-warning-on-quiet);
--background-color-hover: var(--wa-color-warning-fill-quiet);
}
:host([appearance='text'][variant='danger']) {
--label-color: var(--wa-color-danger-on-quiet);
--background-color-hover: var(--wa-color-danger-fill-quiet);
}
/*
@@ -115,14 +164,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);
}
@@ -397,7 +441,7 @@ 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;

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

@@ -71,7 +71,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property() title = ''; // make reactive to pass through
/** The button's theme variant. */
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'text' = 'neutral';
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outline' | 'text' = 'filled';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -85,9 +88,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
/** Draws the button in a loading state. */
@property({ type: Boolean, reflect: true }) loading = false;
/** Draws an outlined button. */
@property({ type: Boolean, reflect: true }) outline = false;
/** Draws a pill-style button with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
@@ -248,7 +248,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'button--neutral': this.variant === 'neutral',
'button--warning': this.variant === 'warning',
'button--danger': this.variant === 'danger',
'button--text': this.variant === 'text',
'button--small': this.size === 'small',
'button--medium': this.size === 'medium',
'button--large': this.size === 'large',
@@ -256,8 +255,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
'button--disabled': this.disabled,
'button--focused': this.hasFocus,
'button--loading': this.loading,
'button--standard': !this.outline,
'button--outline': this.outline,
'button--filled': this.appearance === 'filled',
'button--tinted': this.appearance === 'tinted',
'button--outline': this.appearance === 'outline',
'button--text': this.appearance === 'text',
'button--pill': this.pill,
'button--rtl': this.localize.dir() === 'rtl'
})}

2
src/themes/brutalist.css
View File

@@ -492,7 +492,7 @@
--wa-shadow-offset-y-s: 0;
}
wa-button:not([outline]) {
wa-button:not([appearance='outline']) {
&[variant='neutral'] {
--background-hover: color-mix(in oklab, var(--background), transparent 20%);
}

4
src/themes/default.css
View File

@@ -130,8 +130,8 @@
--wa-color-focus: var(--wa-color-blue-60);
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
--wa-color-mix-hover: black 16%;
--wa-color-mix-active: black 24%;
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/**
* Semantic Colors

2
src/themes/depth_4_glossy.css
View File

@@ -127,7 +127,7 @@ wa-button:not([variant='text']) {
}
}
wa-button:not([outline]) {
wa-button:not([appearance='outline']) {
&[variant='brand'] {
--background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
--background-hover: linear-gradient(

2
src/themes/fa.css
View File

@@ -518,7 +518,7 @@
--background-active: var(--border-color);
--label-color-active: var(--background);
&[outline] {
&[appearance='outline'] {
--background: var(--wa-color-surface-default);
}

2
src/themes/glassy.css
View File

@@ -435,7 +435,7 @@
/* #region Custom styles */
@container preview (min-width: 0) {
wa-button[outline] {
wa-button[appearance='outline'] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-normal);
}

2
src/themes/mellow.css
View File

@@ -423,7 +423,7 @@
}
/* #region Custom styles */
wa-button[outline] {
wa-button[appearance='outline'] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-normal);
}

2
src/themes/migration.css
View File

@@ -542,7 +542,7 @@
}
}
wa-button[outline] {
wa-button[appearance='outline'] {
--border-color: color-mix(in oklab, var(--label-color), transparent 75%);
}

4
src/themes/playful.css
View File

@@ -637,7 +637,7 @@
text-shadow: 0 2px 2px var(--button-text-shadow);
}
wa-button[outline] {
wa-button[appearance='outline'] {
--box-shadow: none;
--border-width: var(--wa-form-control-border-width);
--label-color: var(--wa-color-neutral-on-normal);
@@ -911,7 +911,7 @@
}
}
& wa-button[outline] {
& wa-button[appearance='outline'] {
--box-shadow: none;
--border-color: var(--wa-color-neutral-border-normal);
}

2
src/themes/premium.css
View File

@@ -484,7 +484,7 @@
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
}
wa-button[outline] {
wa-button[appearance='outline'] {
--box-shadow: none;
}