[Card] Add variant, closes #609

docs/docs/components/card.md

@@ -198,7 +198,19 @@ Use the `appearance` attribute to change the card's visual appearance.
 </div>
 ```
 
+### Variants
 
+Use the `variant` attribute to set the card's semantic variant, if any.
+
+```html {.example}
+<div class="wa-grid">
+{% for variant in ['brand', 'success', 'warning', 'danger'] -%}
+  {% for appearance in ['outlined', 'outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
+  <wa-card variant="{{ variant }}" appearance="{{ appearance }}">
+    <div slot="header">{{ appearance | capitalize }}</div>
+    {{ variant | capitalize }} variant.
+  </wa-card>
+  {%- endfor %}
+{%- endfor %}
 </div>
 ```
-

src/components/card/card.css

@@ -21,7 +21,8 @@
   color: var(--wa-color-text-normal);
 }
 
-:host(:is([appearance~='filled'], [appearance~='accent'], .wa-filled, .wa-accent)) {
+:host(:is([appearance~='filled'], [appearance~='accent'], .wa-filled, .wa-accent)),
+:host(:is([variant='brand'], [variant='success'], [variant='warning'], [variant='danger'])) {
   color: var(--text-color, var(--wa-color-text-normal));
 }
 

src/components/card/card.ts

@@ -4,6 +4,7 @@ import { HasSlotController } from '../../internal/slot.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 './card.css';
 
 /**
@@ -30,13 +31,22 @@ import styles from './card.css';
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {
-  static shadowStyle = [sizeStyles, appearanceStyles, styles];
+  static shadowStyle = [sizeStyles, variantStyles, appearanceStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
 
   /** The component's size. Will be inherited by any descendants with a `size` attribute. */
   @property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
 
+  /** The card's theme variant. Defaults to `neutral` if not within another element with a variant. */
+  @property({ reflect: true, initial: 'neutral' }) variant:
+    | 'brand'
+    | 'neutral'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'inherit' = 'inherit';
+
   /** The card's visual appearance. */
   @property({ reflect: true })
   appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';