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

use and document --pulse-color

Browse Source
This commit is contained in:
lindsaym-fa
2025-07-14 14:24:53 -04:00
parent d127ba8646
commit 16005b0e88
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/webawesome/src/components/badge/badge.css
View File

@@ -1,5 +1,5 @@
:host {
--background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
display: inline-flex;
align-items: center;
@@ -10,7 +10,7 @@
font-weight: var(--wa-font-weight-semibold);
line-height: 1;
white-space: nowrap;
background-color: var(--background-color);
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
border-radius: var(--wa-border-radius-s);
border-style: var(--wa-border-style);
@@ -21,29 +21,31 @@
}
/* Appearance modifiers */
:host([appearance~='plain']) {
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: transparent;
}
:host([appearance~='outlined']) {
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
}
:host([appearance~='filled']) {
--pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) {
--pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
}
:host([appearance~='accent']) {
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
border-color: transparent;
@@ -56,8 +58,6 @@
/* Pulse attention */
:host([attention='pulse']) {
--pulse-color: var(--background-color);
animation: pulse 1.5s infinite;
}

6
packages/webawesome/src/components/badge/badge.ts
View File

@@ -14,6 +14,8 @@ import styles from './badge.css';
*
* @csspart base - The component's base wrapper.
*
* @cssproperty --pulse-color - The color of the badge's pulse effect when using `attention="pulse"`.
*
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {
@@ -28,8 +30,8 @@ export default class WaBadge extends WebAwesomeElement {
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
/** Makes the badge pulsate to draw attention. */
@property({ reflect: true }) attention: 'none' | 'pulse' = 'none';
/** Adds an animation to draw attention to the badge. */
@property({ reflect: true }) attention: 'none' | 'pulse' | 'bounce' = 'none';
render() {
return html` <slot part="base" role="status"></slot>`;