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

correct new button appearances

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-12 20:20:20 -04:00
parent 21cbf76baf
commit 7709a63384
3 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/base.njk
View File

@@ -43,7 +43,7 @@
<wa-page>
<header slot="header">
{# Nav toggle #}
<wa-button variant="text" data-toggle-nav>
<wa-button appearance="text" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation"></wa-icon>
</wa-button>

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

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

@@ -91,7 +91,6 @@ export default css`
: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);
@@ -167,8 +166,8 @@ export default css`
}
:host([appearance='subtle']) {
--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));
--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;