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

add custom properties to badge

Browse Source
This commit is contained in:
lindsaym-fa
2024-01-23 11:27:01 -05:00
parent d1ed504dd8
commit 8c8b3f1853
2 changed files with 43 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/badge/badge.component.ts
View File

@@ -14,6 +14,13 @@ import type { CSSResultGroup } from 'lit';
* @slot - The badge's content.
*
* @csspart base - The component's base wrapper.
*
* @cssproperty --background - The badge's background styles.
* @cssproperty --border-color - The color of the badge's border.
* @cssproperty --border-radius - The radius of the badge's corners.
* @cssproperty --border-style - The style of the badge's border.
* @cssproperty --border-width - The width of the badge's border.
* @cssproperty --content-color - The color of the badge's content.
*/
export default class WaBadge extends WebAwesomeElement {
static styles: CSSResultGroup = styles;

64
src/components/badge/badge.styles.ts
View File

@@ -5,9 +5,39 @@ export default css`
${componentStyles}
:host {
--border-color: var(--wa-color-surface-default);
--border-radius: var(--wa-corners-xs);
--border-style: var(--wa-border-style);
--border-width: var(--wa-border-width-s);
display: inline-flex;
}
:host([variant='brand']) {
--background: var(--wa-color-brand-spot);
--content-color: var(--wa-color-brand-text-on-spot);
}
:host([variant='success']) {
--background: var(--wa-color-success-spot);
--content-color: var(--wa-color-success-text-on-spot);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-spot);
--content-color: var(--wa-color-warning-text-on-spot);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-spot);
--content-color: var(--wa-color-neutral-text-on-spot);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-spot);
--content-color: var(--wa-color-danger-text-on-spot);
}
.badge {
display: inline-flex;
align-items: center;
@@ -15,8 +45,12 @@ export default css`
font-size: max(12px, 0.75em);
font-weight: var(--wa-font-weight-medium);
line-height: 1;
border-radius: var(--wa-corners-xs);
border: solid 1px var(--wa-color-surface-default);
background: var(--background);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
color: var(--content-color);
white-space: nowrap;
padding: 0.35em 0.6em;
user-select: none;
@@ -24,32 +58,6 @@ export default css`
cursor: inherit;
}
/* Variant modifiers */
.badge--brand {
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
}
.badge--success {
background-color: var(--wa-color-success-spot);
color: var(--wa-color-success-text-on-spot);
}
.badge--neutral {
background-color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-text-on-spot);
}
.badge--warning {
background-color: var(--wa-color-warning-spot);
color: var(--wa-color-warning-text-on-spot);
}
.badge--danger {
background-color: var(--wa-color-danger-spot);
color: var(--wa-color-danger-text-on-spot);
}
/* Pill modifier */
.badge--pill {
border-radius: var(--wa-corners-pill);