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 variant helper in tag & callout

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 04:06:47 -05:00
parent 8e01281c12
commit a6b71e119c
4 changed files with 11 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/callout/callout.css
View File

@@ -2,6 +2,9 @@
--icon-color: currentColor;
--icon-size: var(--wa-font-size-l);
--spacing: var(--wa-space-m);
--background-color: var(--wa-color-fill-quiet);
--border-color: var(--wa-color-border-quiet);
--content-color: var(--wa-color-on-normal);
position: relative;
display: flex;
@@ -15,36 +18,6 @@
padding: var(--spacing);
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-quiet);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-quiet);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-quiet);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-quiet);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
[part~='icon'] {
flex: 0 0 auto;
display: flex;

3
src/components/callout/callout.ts
View File

@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './callout.css';
/**
@@ -21,7 +22,7 @@ import styles from './callout.css';
*/
@customElement('wa-callout')
export default class WaCallout extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [variantStyles, styles];
/** The callout's theme variant. */
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';

34
src/components/tag/tag.css
View File

@@ -3,39 +3,13 @@
--border-style: var(--wa-border-style);
--border-width: var(--wa-border-width-s);
--background-color: var(--wa-color-fill-quiet);
--border-color: var(--wa-color-border-normal);
--content-color: var(--wa-color-on-normal);
display: inline-block;
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-normal);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-normal);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-normal);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-normal);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-normal);
--content-color: var(--wa-color-danger-on-normal);
}
.tag {
display: flex;
align-items: center;

3
src/components/tag/tag.ts
View File

@@ -3,6 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { WaRemoveEvent } from '../../events/remove.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import styles from './tag.css';
@@ -33,7 +34,7 @@ import styles from './tag.css';
*/
@customElement('wa-tag')
export default class WaTag extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [variantStyles, styles];
private readonly localize = new LocalizeController(this);