[WIP] Add size to badge

docs/docs/components/badge.md

@@ -77,6 +77,16 @@ Use the `pill` attribute to give badges rounded edges.
 <wa-badge variant="danger" pill>Danger</wa-badge>
 ```
 
+### Sizes
+
+Use the `size` attribute to change a badge's size.
+
+```html {.example}
+<wa-badge size="small">Small</wa-badge>
+<wa-badge size="medium">Medium</wa-badge>
+<wa-badge size="large">Large</wa-badge>
+```
+
 ### Pulsating Badges
 
 Use the `pulse` attribute to draw attention to the badge with a subtle animation.

src/components/badge/badge.ts

@@ -1,9 +1,10 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import nativeStyles from '../../styles/native/badge.css';
 import appearanceStyles from '../../styles/utilities/appearance.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
-import styles from './badge.css';
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
@@ -24,7 +25,7 @@ import styles from './badge.css';
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, appearanceStyles, styles];
+  static shadowStyle = [variantStyles, sizeStyles, appearanceStyles, nativeStyles];
 
   /** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
   @property({ reflect: true, initial: 'brand' }) variant:

src/styles/native/badge.css

@@ -1,8 +1,14 @@
-:host {
+:host,
+.wa-badge {
+  --size-xs: var(--wa-font-size-2xs);
+  --size-s: var(--wa-font-size-2xs);
+  --size-m: var(--wa-font-size-2xs);
+  --size-l: var(--wa-font-size-xs);
+
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: max(var(--wa-font-size-2xs), 0.75em);
+  font-size: max(var(--wa-size), 0.75em);
   font-weight: var(--wa-font-weight-semibold);
   line-height: 1;
   background-color: var(--background-color, var(--wa-color-fill-loud));
@@ -18,19 +24,15 @@
   cursor: inherit;
 }
 
-/* Pill modifier */
-:host([pill]) {
-  border-radius: var(--wa-border-radius-pill);
+::slotted(wa-icon),
+.wa-badge > wa-icon {
+  margin-inline-end: var(--wa-space-2xs, 0.25em);
+  opacity: 90%;
+  line-height: 1;
+  height: 0.85em;
 }
 
-/* Pulse modifier */
-:host([pulse]) {
-  --pulse-color: var(--background-color);
-
-  animation: pulse 1.5s infinite;
-}
-
-@keyframes pulse {
+@keyframes wa-pulse {
   0% {
     box-shadow: 0 0 0 0 var(--pulse-color);
   }
@@ -42,9 +44,16 @@
   }
 }
 
-::slotted(wa-icon) {
-  margin-inline-end: var(--wa-space-2xs, 0.25em);
-  opacity: 90%;
-  line-height: 1;
-  height: 0.85em;
+/* Pill modifier */
+.wa-pill,
+:host([pill]) {
+  border-radius: var(--wa-border-radius-pill);
+}
+
+/* Pulse modifier */
+:host([pulse]),
+.wa-badge.wa-pulse {
+  --pulse-color: var(--background-color);
+
+  animation: wa-pulse 1.5s infinite;
 }