From a6b71e119cacfa7bf430694cf5faa1c7543fe851 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 17 Dec 2024 04:06:47 -0500
Subject: [PATCH] Use variant helper in tag & callout

---
 src/components/callout/callout.css | 33 +++--------------------------
 src/components/callout/callout.ts  |  3 ++-
 src/components/tag/tag.css         | 34 ++++--------------------------
 src/components/tag/tag.ts          |  3 ++-
 4 files changed, 11 insertions(+), 62 deletions(-)

diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css
index 8bf187924..6b52d0074 100644
--- a/src/components/callout/callout.css
+++ b/src/components/callout/callout.css
@@ -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;
diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts
index ddbf4d944..dae596097 100644
--- a/src/components/callout/callout.ts
+++ b/src/components/callout/callout.ts
@@ -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';
diff --git a/src/components/tag/tag.css b/src/components/tag/tag.css
index 2590abe48..6ee0fb197 100644
--- a/src/components/tag/tag.css
+++ b/src/components/tag/tag.css
@@ -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;
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 973200bf0..20f600f3e 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -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);