[Callout] Add appearance & size, closes #422 (#432)

Co-authored-by: lindsaym-fa <dev@lindsaym.design>

docs/docs/components/callout.md

@@ -58,6 +58,71 @@ Set the `variant` attribute to change the callout's variant.
 </wa-callout>
 ```
 
+### Appearance
+
+Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent">
+  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
+  This <strong>accent</strong> callout is also <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="accent">
+  <wa-icon slot="icon" name="square-check"></wa-icon>
+  This <strong>accent</strong> callout draws attention without an outline
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined filled">
+  <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
+  This callout is both <strong>filled</strong> and <strong>outlined</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="filled">
+  <wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
+  This callout is only <strong>filled</strong>
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="outlined">
+  <wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
+  Here's an <strong>outlined</strong> callout
+</wa-callout>
+
+<br />
+
+<wa-callout variant="brand" appearance="plain">
+  <wa-icon slot="icon" name="font" variant="regular"></wa-icon>
+  No bells and whistles on this <strong>plain</strong> callout
+</wa-callout>
+```
+
+### Sizes
+
+Use the `size` attribute to change a callout's size.
+
+```html {.example}
+<wa-callout variant="brand" appearance="outlined accent" size="large">
+  <wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
+  This is meant to be very emphasized.
+</wa-callout>
+<wa-callout>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Normal-sized callout.
+</wa-callout>
+<wa-callout variant="plain" appearance="plain" size="small">
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  Just a small tip!
+</wa-callout>
+```
+
 ### Without Icons
 
 Icons are optional. Simply omit the `icon` slot if you don't want them.

src/components/callout/callout.css

@@ -8,13 +8,17 @@
   align-items: stretch;
   border-radius: var(--wa-panel-border-radius);
   background-color: var(--background-color, var(--wa-color-fill-quiet));
-  border-color: var(--border-color, var(--wa-color-border-quiet));
+  border-color: var(--border-color, transparent);
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
   color: var(--text-color, var(--wa-color-on-normal));
   padding: var(--spacing);
 }
 
+:host([appearance~='accent']) {
+  font-weight: var(--wa-font-weight-semibold);
+}
+
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;

src/components/callout/callout.ts

@@ -1,6 +1,8 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
+import appearanceStyles from '../../styles/utilities/appearance.css';
+import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import styles from './callout.css';
 
@@ -22,11 +24,23 @@ import styles from './callout.css';
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
-  static shadowStyle = [variantStyles, styles];
+  static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles];
 
   /** The callout's theme variant. */
   @property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
 
+  /** The callout's visual appearance. */
+  @property({ reflect: true }) appearance:
+    | 'accent'
+    | 'filled'
+    | 'outlined'
+    | 'plain'
+    | 'outlined filled'
+    | 'outlined accent' = 'outlined filled';
+
+  /** The callout's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
   render() {
     return html`
       <div part="icon">

src/styles/utilities/appearance.css

@@ -39,6 +39,8 @@
 .wa-plain,
 :host([appearance~='plain']) {
   --background-color: transparent;
+  --text-color: var(--wa-color-on-quiet);
+
   --background-color-hover: var(--wa-color-fill-quiet);
   --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);