From 9b8433c9962eef10ad8ae3d162871e463c4f364d Mon Sep 17 00:00:00 2001
From: randomguy-2650 <150704902+randomguy-2650@users.noreply.github.com>
Date: Mon, 21 Jul 2025 17:37:47 +0200
Subject: [PATCH] Update outdated docs related to A+O appearance (#1204)

---
 .../docs/_includes/visual-tests/color.njk     | 152 +++++-------------
 1 file changed, 41 insertions(+), 111 deletions(-)

diff --git a/packages/webawesome/docs/_includes/visual-tests/color.njk b/packages/webawesome/docs/_includes/visual-tests/color.njk
index ca06fcbf5..aa78b0c33 100644
--- a/packages/webawesome/docs/_includes/visual-tests/color.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/color.njk
@@ -12,9 +12,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="brand" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="brand" appearance="filled">Filled</wa-badge>
           <wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
           <wa-badge variant="brand" appearance="plain">Plain</wa-badge>
@@ -22,9 +21,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
           <wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
@@ -35,9 +33,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
           <wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
           <wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
@@ -45,9 +42,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
           <wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
@@ -58,9 +54,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="success" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="success" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="success" appearance="filled">Filled</wa-badge>
           <wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
           <wa-badge variant="success" appearance="plain">Plain</wa-badge>
@@ -68,9 +63,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-success" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
           <wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
@@ -81,9 +75,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="warning" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="warning" appearance="filled">Filled</wa-badge>
           <wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
           <wa-badge variant="warning" appearance="plain">Plain</wa-badge>
@@ -91,9 +84,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
           <wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
@@ -104,9 +96,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
-          <wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge variant="danger" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge variant="danger" appearance="filled">Filled</wa-badge>
           <wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
           <wa-badge variant="danger" appearance="plain">Plain</wa-badge>
@@ -114,9 +105,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
           <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
-          <wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
+          <wa-badge class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-badge>
           <wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
           <wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
           <wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
@@ -142,9 +132,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="brand" appearance="accent">Accent</wa-button>
-          <wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="brand" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="brand" appearance="filled">Filled</wa-button>
           <wa-button variant="brand" appearance="outlined">Outlined</wa-button>
           <wa-button variant="brand" appearance="plain">Plain</wa-button>
@@ -152,9 +141,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-brand" appearance="filled">Filled</wa-button>
           <wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-brand" appearance="plain">Plain</wa-button>
@@ -165,9 +153,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="neutral" appearance="accent">Accent</wa-button>
-          <wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="neutral" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="neutral" appearance="filled">Filled</wa-button>
           <wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
           <wa-button variant="neutral" appearance="plain">Plain</wa-button>
@@ -175,9 +162,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
           <wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
@@ -188,9 +174,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="success" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="success" appearance="accent">Accent</wa-button>
-          <wa-button variant="success" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="success" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="success" appearance="filled">Filled</wa-button>
           <wa-button variant="success" appearance="outlined">Outlined</wa-button>
           <wa-button variant="success" appearance="plain">Plain</wa-button>
@@ -198,9 +183,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-success" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-success" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-success" appearance="filled">Filled</wa-button>
           <wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-success" appearance="plain">Plain</wa-button>
@@ -211,9 +195,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="warning" appearance="accent">Accent</wa-button>
-          <wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="warning" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="warning" appearance="filled">Filled</wa-button>
           <wa-button variant="warning" appearance="outlined">Outlined</wa-button>
           <wa-button variant="warning" appearance="plain">Plain</wa-button>
@@ -221,9 +204,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-warning" appearance="filled">Filled</wa-button>
           <wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-warning" appearance="plain">Plain</wa-button>
@@ -234,9 +216,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
           <wa-button variant="danger" appearance="accent">Accent</wa-button>
-          <wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button variant="danger" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button variant="danger" appearance="filled">Filled</wa-button>
           <wa-button variant="danger" appearance="outlined">Outlined</wa-button>
           <wa-button variant="danger" appearance="plain">Plain</wa-button>
@@ -244,9 +225,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
           <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
-          <wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
+          <wa-button class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-button>
           <wa-button class="wa-danger" appearance="filled">Filled</wa-button>
           <wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
           <wa-button class="wa-danger" appearance="plain">Plain</wa-button>
@@ -272,17 +252,13 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="brand" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -300,17 +276,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-brand" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-star"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-brand" appearance="accent">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-brand" appearance="filled">
             <wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -331,17 +303,13 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -359,17 +327,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-neutral" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-info"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-neutral" appearance="accent">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-neutral" appearance="filled">
             <wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -390,17 +354,13 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="success" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -418,17 +378,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-success" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-check"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-success" appearance="accent">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-success" appearance="filled">
             <wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -449,17 +405,13 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="warning" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -477,17 +429,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-warning" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-warning" appearance="accent">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-warning" appearance="filled">
             <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -508,17 +456,13 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout variant="danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout variant="danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout variant="danger" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout variant="danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -536,17 +480,13 @@
       </td>
       <td>
         <div class="wa-grid wa-gap-2xs">
-          <wa-callout class="wa-danger" appearance="accent outlined">
-            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            A+O
-          </wa-callout>
           <wa-callout class="wa-danger" appearance="accent">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
             Accent
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled outlined">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
-            F+O
+            Filled + Outlined
           </wa-callout>
           <wa-callout class="wa-danger" appearance="filled">
             <wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -582,9 +522,8 @@
       <th><code>brand</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
           <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="brand" appearance="plain">Plain</wa-tag>
@@ -592,9 +531,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
@@ -605,9 +543,8 @@
       <th><code>neutral</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
           <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
@@ -615,9 +552,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
@@ -628,9 +564,8 @@
       <th><code>success</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="success" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="success" appearance="filled">Filled</wa-tag>
           <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="success" appearance="plain">Plain</wa-tag>
@@ -638,9 +573,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-success" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
@@ -651,9 +585,8 @@
       <th><code>warning</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
           <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="warning" appearance="plain">Plain</wa-tag>
@@ -661,9 +594,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
@@ -674,9 +606,8 @@
       <th><code>danger</code></th>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag variant="danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
-          <wa-tag variant="danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag variant="danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
           <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
           <wa-tag variant="danger" appearance="plain">Plain</wa-tag>
@@ -684,9 +615,8 @@
       </td>
       <td>
         <div class="wa-cluster wa-gap-2xs">
-          <wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
           <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
-          <wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
+          <wa-tag class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
           <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
           <wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
@@ -695,4 +625,4 @@
     </tr>
   </tbody>
 </table>
-</div>
\ No newline at end of file
+</div>