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

tinted button style touch-ups

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-13 14:20:31 -04:00
parent f4f56fc344
commit 232f12576c
1 changed files with 34 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,6 +49,40 @@ export default css`
--label-color: var(--wa-color-danger-on-loud);
}
/*
* 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
*/
@@ -97,8 +131,6 @@ export default css`
:host([appearance='text']) {
--background-color: 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']) {
@@ -126,40 +158,6 @@ export default css`
--background-color-hover: var(--wa-color-danger-fill-quiet);
}
/*
* 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);
}
/*
* Checked buttons
*/