@indico-data/design-system 3.20.0 → 3.22.0

package/lib/index.esm.css

@@ -133,21 +133,21 @@
   --pf-yellow-color-700: #58481d;
   --pf-yellow-color-800: #322c1b;
   --pf-yellow-color-900: #1b160e;
-  --pf-green-color: #14b869;
+  --pf-green-color: #14b866;
   --pf-green-color-50: #f7fdfa;
   --pf-green-color-100: #effbf5;
   --pf-green-color-150: #e7f9f0;
   --pf-green-color-200: #def7eb;
   --pf-green-color-250: #c2f4db;
-  --pf-green-color-300: #a8f0cd;
-  --pf-green-color-400: #3eea97;
-  --pf-green-color-450: #18dc7e;
-  --pf-green-color-500: #14b869;
+  --pf-green-color-300: #97edc2;
+  --pf-green-color-400: #44e494;
+  --pf-green-color-450: #1cd97a;
+  --pf-green-color-500: #14b866;
   --pf-green-color-550: #129e45;
-  --pf-green-color-600: #17824e;
-  --pf-green-color-700: #175e3c;
-  --pf-green-color-800: #173627;
-  --pf-green-color-900: #0e1b15;
+  --pf-green-color-600: #14804a;
+  --pf-green-color-700: #175e3b;
+  --pf-green-color-800: #173626;
+  --pf-green-color-900: #0e1b14;
   --pf-teal-color: #29a3a3;
   --pf-teal-color-50: #f6fdfd;
   --pf-teal-color-100: #eefcfc;
@@ -219,6 +219,7 @@
   --pf-primary-color-500: #50647c;
   --pf-primary-color-550: #455066;
   --pf-primary-color-600: #243447;
+  --pf-primary-color-650: #1f2a37;
   --pf-primary-color-700: #192534;
   --pf-primary-color-800: #111b28;
   --pf-primary-color-900: #0c141d;
@@ -250,6 +251,7 @@
   --pf-tertiary-color-550: #5f6a85;
   --pf-tertiary-color-600: #58637b;
   --pf-tertiary-color-700: #4b5364;
+  --pf-tertiary-color-750: #373f51;
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
 }
@@ -443,14 +445,17 @@
   --pf-semantic-background-secondary: var(--pf-gray-color-50);
   --pf-semantic-background-tertiary: var(--pf-gray-color-200);
   --pf-semantic-background-quaternary: var(--pf-gray-color-250);
+  --pf-semantic-background-soft: var(--pf-gray-color-250);
   --pf-semantic-background-accent: var(--pf-secondary-color-200);
   --pf-semantic-background-highlight: var(--pf-blue-color-250);
   --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
   --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
   --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
+  --pf-semantic-background-contrast: var(--pf-secondary-color-150);
   --pf-semantic-border-primary: var(--pf-gray-color-300);
   --pf-semantic-border-secondary: var(--pf-gray-color-250);
-  --pf-semantic-border-hover: var(--pf-gray-color-400);
+  --pf-semantic-border-tertiary: var(--pf-gray-color-200);
+  --pf-semantic-border-quaternary: var(--pf-gray-color-400);
   --pf-semantic-border-soft: var(--pf-secondary-color-450);
   --pf-semantic-border-accent: var(--pf-blue-color-450);
   --pf-semantic-border-error: var(--pf-red-color-450);
@@ -514,14 +519,17 @@
   --pf-semantic-background-secondary: var(--pf-primary-color-800);
   --pf-semantic-background-tertiary: var(--pf-primary-color-600);
   --pf-semantic-background-quaternary: var(--pf-primary-color-500);
+  --pf-semantic-background-soft: var(--pf-tertiary-color-750);
   --pf-semantic-background-accent: var(--pf-blue-color-800);
   --pf-semantic-background-highlight: var(--pf-blue-color-700);
   --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
   --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
-  --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
+  --pf-semantic-background-contrast: var(--pf-primary-color-650);
   --pf-semantic-border-primary: var(--pf-tertiary-color-700);
   --pf-semantic-border-secondary: var(--pf-primary-color-600);
-  --pf-semantic-border-hover: var(--pf-tertiary-color-600);
+  --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
+  --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
   --pf-semantic-border-soft: var(--pf-secondary-color-600);
   --pf-semantic-border-accent: var(--pf-secondary-color-400);
   --pf-semantic-border-error: var(--pf-red-color-450);
@@ -5373,7 +5381,7 @@ form {
 .password-input-wrapper textarea:hover,
 .textarea-wrapper input:hover,
 .textarea-wrapper textarea:hover {
-  border-color: var(--pf-semantic-border-hover);
+  border-color: var(--pf-semantic-border-quaternary);
 }
 .time-input-wrapper input:focus,
 .time-input-wrapper textarea:focus,
@@ -5479,7 +5487,7 @@ form {
   box-shadow: none;
 }
 .select-wrapper .select__control:hover:not(:focus) {
-  border-color: var(--pf-semantic-border-hover);
+  border-color: var(--pf-semantic-border-quaternary);
 }
 .select-wrapper .select__control:focus, .select-wrapper .select__control--is-focused {
   border: var(--pf-border-sm) solid var(--pf-semantic-border-accent);
@@ -6170,2843 +6178,740 @@ body div[class*=select__single-value] {
   padding-left: var(--pf-spacing-2xl);
 }
 
-.color-primary {
-  color: var(--pf-primary-color);
-}
-
-.bg-primary {
-  background-color: var(--pf-primary-color);
-}
-
-.color-primary-50 {
-  color: var(--pf-primary-color-50);
-}
-
-.bg-primary-50 {
-  background-color: var(--pf-primary-color-50);
-}
-
-.color-primary-100 {
-  color: var(--pf-primary-color-100);
-}
-
-.bg-primary-100 {
-  background-color: var(--pf-primary-color-100);
-}
-
-.color-primary-150 {
-  color: var(--pf-primary-color-150);
-}
-
-.bg-primary-150 {
-  background-color: var(--pf-primary-color-150);
-}
-
-.color-primary-200 {
-  color: var(--pf-primary-color-200);
-}
-
-.bg-primary-200 {
-  background-color: var(--pf-primary-color-200);
-}
-
-.color-primary-250 {
-  color: var(--pf-primary-color-250);
-}
-
-.bg-primary-250 {
-  background-color: var(--pf-primary-color-250);
-}
-
-.color-primary-300 {
-  color: var(--pf-primary-color-300);
-}
-
-.bg-primary-300 {
-  background-color: var(--pf-primary-color-300);
-}
-
-.color-primary-350 {
-  color: var(--pf-primary-color-350);
-}
-
-.bg-primary-350 {
-  background-color: var(--pf-primary-color-350);
-}
-
-.color-primary-400 {
-  color: var(--pf-primary-color-400);
-}
-
-.bg-primary-400 {
-  background-color: var(--pf-primary-color-400);
-}
-
-.color-primary-450 {
-  color: var(--pf-primary-color-450);
-}
-
-.bg-primary-450 {
-  background-color: var(--pf-primary-color-450);
-}
-
-.color-primary-500 {
-  color: var(--pf-primary-color-500);
-}
-
-.bg-primary-500 {
-  background-color: var(--pf-primary-color-500);
-}
-
-.color-primary-550 {
-  color: var(--pf-primary-color-550);
-}
-
-.bg-primary-550 {
-  background-color: var(--pf-primary-color-550);
-}
-
-.color-primary-600 {
-  color: var(--pf-primary-color-600);
-}
-
-.bg-primary-600 {
-  background-color: var(--pf-primary-color-600);
-}
-
-.color-primary-650 {
-  color: var(--pf-primary-color-650);
-}
-
-.bg-primary-650 {
-  background-color: var(--pf-primary-color-650);
-}
-
-.color-primary-700 {
-  color: var(--pf-primary-color-700);
-}
-
-.bg-primary-700 {
-  background-color: var(--pf-primary-color-700);
-}
-
-.color-primary-750 {
-  color: var(--pf-primary-color-750);
-}
-
-.bg-primary-750 {
-  background-color: var(--pf-primary-color-750);
-}
-
-.color-primary-800 {
-  color: var(--pf-primary-color-800);
-}
-
-.bg-primary-800 {
-  background-color: var(--pf-primary-color-800);
-}
-
-.color-primary-850 {
-  color: var(--pf-primary-color-850);
-}
-
-.bg-primary-850 {
-  background-color: var(--pf-primary-color-850);
-}
-
-.color-primary-900 {
-  color: var(--pf-primary-color-900);
-}
-
-.bg-primary-900 {
-  background-color: var(--pf-primary-color-900);
-}
-
-.color-primary-950 {
-  color: var(--pf-primary-color-950);
-}
-
-.bg-primary-950 {
-  background-color: var(--pf-primary-color-950);
-}
-
-.color-primary-1000 {
-  color: var(--pf-primary-color-1000);
-}
-
-.bg-primary-1000 {
-  background-color: var(--pf-primary-color-1000);
-}
-
-.color-secondary {
-  color: var(--pf-secondary-color);
-}
-
-.bg-secondary {
-  background-color: var(--pf-secondary-color);
-}
-
-.color-secondary-50 {
-  color: var(--pf-secondary-color-50);
-}
-
-.bg-secondary-50 {
-  background-color: var(--pf-secondary-color-50);
-}
-
-.color-secondary-100 {
-  color: var(--pf-secondary-color-100);
-}
-
-.bg-secondary-100 {
-  background-color: var(--pf-secondary-color-100);
-}
-
-.color-secondary-150 {
-  color: var(--pf-secondary-color-150);
-}
-
-.bg-secondary-150 {
-  background-color: var(--pf-secondary-color-150);
-}
-
-.color-secondary-200 {
-  color: var(--pf-secondary-color-200);
-}
-
-.bg-secondary-200 {
-  background-color: var(--pf-secondary-color-200);
-}
-
-.color-secondary-250 {
-  color: var(--pf-secondary-color-250);
-}
-
-.bg-secondary-250 {
-  background-color: var(--pf-secondary-color-250);
-}
-
-.color-secondary-300 {
-  color: var(--pf-secondary-color-300);
-}
-
-.bg-secondary-300 {
-  background-color: var(--pf-secondary-color-300);
-}
-
-.color-secondary-350 {
-  color: var(--pf-secondary-color-350);
-}
-
-.bg-secondary-350 {
-  background-color: var(--pf-secondary-color-350);
-}
-
-.color-secondary-400 {
-  color: var(--pf-secondary-color-400);
-}
-
-.bg-secondary-400 {
-  background-color: var(--pf-secondary-color-400);
-}
-
-.color-secondary-450 {
-  color: var(--pf-secondary-color-450);
-}
-
-.bg-secondary-450 {
-  background-color: var(--pf-secondary-color-450);
-}
-
-.color-secondary-500 {
-  color: var(--pf-secondary-color-500);
-}
-
-.bg-secondary-500 {
-  background-color: var(--pf-secondary-color-500);
-}
-
-.color-secondary-550 {
-  color: var(--pf-secondary-color-550);
-}
-
-.bg-secondary-550 {
-  background-color: var(--pf-secondary-color-550);
-}
-
-.color-secondary-600 {
-  color: var(--pf-secondary-color-600);
-}
-
-.bg-secondary-600 {
-  background-color: var(--pf-secondary-color-600);
-}
-
-.color-secondary-650 {
-  color: var(--pf-secondary-color-650);
-}
-
-.bg-secondary-650 {
-  background-color: var(--pf-secondary-color-650);
-}
-
-.color-secondary-700 {
-  color: var(--pf-secondary-color-700);
-}
-
-.bg-secondary-700 {
-  background-color: var(--pf-secondary-color-700);
-}
-
-.color-secondary-750 {
-  color: var(--pf-secondary-color-750);
-}
-
-.bg-secondary-750 {
-  background-color: var(--pf-secondary-color-750);
-}
-
-.color-secondary-800 {
-  color: var(--pf-secondary-color-800);
-}
-
-.bg-secondary-800 {
-  background-color: var(--pf-secondary-color-800);
-}
-
-.color-secondary-850 {
-  color: var(--pf-secondary-color-850);
-}
-
-.bg-secondary-850 {
-  background-color: var(--pf-secondary-color-850);
-}
-
-.color-secondary-900 {
-  color: var(--pf-secondary-color-900);
-}
-
-.bg-secondary-900 {
-  background-color: var(--pf-secondary-color-900);
-}
-
-.color-secondary-950 {
-  color: var(--pf-secondary-color-950);
-}
-
-.bg-secondary-950 {
-  background-color: var(--pf-secondary-color-950);
-}
-
-.color-secondary-1000 {
-  color: var(--pf-secondary-color-1000);
-}
-
-.bg-secondary-1000 {
-  background-color: var(--pf-secondary-color-1000);
-}
-
-.color-tertiary {
-  color: var(--pf-tertiary-color);
-}
-
-.bg-tertiary {
-  background-color: var(--pf-tertiary-color);
-}
-
-.color-tertiary-50 {
-  color: var(--pf-tertiary-color-50);
-}
-
-.bg-tertiary-50 {
-  background-color: var(--pf-tertiary-color-50);
-}
-
-.color-tertiary-100 {
-  color: var(--pf-tertiary-color-100);
-}
-
-.bg-tertiary-100 {
-  background-color: var(--pf-tertiary-color-100);
-}
-
-.color-tertiary-150 {
-  color: var(--pf-tertiary-color-150);
-}
-
-.bg-tertiary-150 {
-  background-color: var(--pf-tertiary-color-150);
-}
-
-.color-tertiary-200 {
-  color: var(--pf-tertiary-color-200);
-}
-
-.bg-tertiary-200 {
-  background-color: var(--pf-tertiary-color-200);
-}
-
-.color-tertiary-250 {
-  color: var(--pf-tertiary-color-250);
-}
-
-.bg-tertiary-250 {
-  background-color: var(--pf-tertiary-color-250);
-}
-
-.color-tertiary-300 {
-  color: var(--pf-tertiary-color-300);
-}
-
-.bg-tertiary-300 {
-  background-color: var(--pf-tertiary-color-300);
-}
-
-.color-tertiary-350 {
-  color: var(--pf-tertiary-color-350);
-}
-
-.bg-tertiary-350 {
-  background-color: var(--pf-tertiary-color-350);
-}
-
-.color-tertiary-400 {
-  color: var(--pf-tertiary-color-400);
-}
-
-.bg-tertiary-400 {
-  background-color: var(--pf-tertiary-color-400);
-}
-
-.color-tertiary-450 {
-  color: var(--pf-tertiary-color-450);
-}
-
-.bg-tertiary-450 {
-  background-color: var(--pf-tertiary-color-450);
-}
-
-.color-tertiary-500 {
-  color: var(--pf-tertiary-color-500);
-}
-
-.bg-tertiary-500 {
-  background-color: var(--pf-tertiary-color-500);
-}
-
-.color-tertiary-550 {
-  color: var(--pf-tertiary-color-550);
-}
-
-.bg-tertiary-550 {
-  background-color: var(--pf-tertiary-color-550);
-}
-
-.color-tertiary-600 {
-  color: var(--pf-tertiary-color-600);
-}
-
-.bg-tertiary-600 {
-  background-color: var(--pf-tertiary-color-600);
-}
-
-.color-tertiary-650 {
-  color: var(--pf-tertiary-color-650);
-}
-
-.bg-tertiary-650 {
-  background-color: var(--pf-tertiary-color-650);
-}
-
-.color-tertiary-700 {
-  color: var(--pf-tertiary-color-700);
-}
-
-.bg-tertiary-700 {
-  background-color: var(--pf-tertiary-color-700);
-}
-
-.color-tertiary-750 {
-  color: var(--pf-tertiary-color-750);
-}
-
-.bg-tertiary-750 {
-  background-color: var(--pf-tertiary-color-750);
-}
-
-.color-tertiary-800 {
-  color: var(--pf-tertiary-color-800);
-}
-
-.bg-tertiary-800 {
-  background-color: var(--pf-tertiary-color-800);
-}
-
-.color-tertiary-850 {
-  color: var(--pf-tertiary-color-850);
-}
-
-.bg-tertiary-850 {
-  background-color: var(--pf-tertiary-color-850);
-}
-
-.color-tertiary-900 {
-  color: var(--pf-tertiary-color-900);
-}
-
-.bg-tertiary-900 {
-  background-color: var(--pf-tertiary-color-900);
-}
-
-.color-tertiary-950 {
-  color: var(--pf-tertiary-color-950);
-}
-
-.bg-tertiary-950 {
-  background-color: var(--pf-tertiary-color-950);
-}
-
-.color-tertiary-1000 {
-  color: var(--pf-tertiary-color-1000);
-}
-
-.bg-tertiary-1000 {
-  background-color: var(--pf-tertiary-color-1000);
-}
-
-.color-gray {
-  color: var(--pf-gray-color);
-}
-
-.bg-gray {
-  background-color: var(--pf-gray-color);
-}
-
-.color-gray-50 {
-  color: var(--pf-gray-color-50);
-}
-
-.bg-gray-50 {
-  background-color: var(--pf-gray-color-50);
-}
-
-.color-gray-100 {
-  color: var(--pf-gray-color-100);
-}
-
-.bg-gray-100 {
-  background-color: var(--pf-gray-color-100);
-}
-
-.color-gray-150 {
-  color: var(--pf-gray-color-150);
-}
-
-.bg-gray-150 {
-  background-color: var(--pf-gray-color-150);
-}
-
-.color-gray-200 {
-  color: var(--pf-gray-color-200);
-}
-
-.bg-gray-200 {
-  background-color: var(--pf-gray-color-200);
-}
-
-.color-gray-250 {
-  color: var(--pf-gray-color-250);
-}
-
-.bg-gray-250 {
-  background-color: var(--pf-gray-color-250);
-}
-
-.color-gray-300 {
-  color: var(--pf-gray-color-300);
-}
-
-.bg-gray-300 {
-  background-color: var(--pf-gray-color-300);
-}
-
-.color-gray-350 {
-  color: var(--pf-gray-color-350);
-}
-
-.bg-gray-350 {
-  background-color: var(--pf-gray-color-350);
-}
-
-.color-gray-400 {
-  color: var(--pf-gray-color-400);
-}
-
-.bg-gray-400 {
-  background-color: var(--pf-gray-color-400);
-}
-
-.color-gray-450 {
-  color: var(--pf-gray-color-450);
-}
-
-.bg-gray-450 {
-  background-color: var(--pf-gray-color-450);
-}
-
-.color-gray-500 {
-  color: var(--pf-gray-color-500);
-}
-
-.bg-gray-500 {
-  background-color: var(--pf-gray-color-500);
-}
-
-.color-gray-550 {
-  color: var(--pf-gray-color-550);
-}
-
-.bg-gray-550 {
-  background-color: var(--pf-gray-color-550);
-}
-
-.color-gray-600 {
-  color: var(--pf-gray-color-600);
-}
-
-.bg-gray-600 {
-  background-color: var(--pf-gray-color-600);
-}
-
-.color-gray-650 {
-  color: var(--pf-gray-color-650);
-}
-
-.bg-gray-650 {
-  background-color: var(--pf-gray-color-650);
-}
-
-.color-gray-700 {
-  color: var(--pf-gray-color-700);
-}
-
-.bg-gray-700 {
-  background-color: var(--pf-gray-color-700);
-}
-
-.color-gray-750 {
-  color: var(--pf-gray-color-750);
-}
-
-.bg-gray-750 {
-  background-color: var(--pf-gray-color-750);
-}
-
-.color-gray-800 {
-  color: var(--pf-gray-color-800);
-}
-
-.bg-gray-800 {
-  background-color: var(--pf-gray-color-800);
-}
-
-.color-gray-850 {
-  color: var(--pf-gray-color-850);
-}
-
-.bg-gray-850 {
-  background-color: var(--pf-gray-color-850);
-}
-
-.color-gray-900 {
-  color: var(--pf-gray-color-900);
-}
-
-.bg-gray-900 {
-  background-color: var(--pf-gray-color-900);
-}
-
-.color-gray-950 {
-  color: var(--pf-gray-color-950);
-}
-
-.bg-gray-950 {
-  background-color: var(--pf-gray-color-950);
-}
-
-.color-gray-1000 {
-  color: var(--pf-gray-color-1000);
-}
-
-.bg-gray-1000 {
-  background-color: var(--pf-gray-color-1000);
-}
-
-.color-red {
-  color: var(--pf-red-color);
-}
-
-.bg-red {
-  background-color: var(--pf-red-color);
-}
-
-.color-red-50 {
-  color: var(--pf-red-color-50);
-}
-
-.bg-red-50 {
-  background-color: var(--pf-red-color-50);
-}
-
-.color-red-100 {
-  color: var(--pf-red-color-100);
-}
-
-.bg-red-100 {
-  background-color: var(--pf-red-color-100);
-}
-
-.color-red-150 {
-  color: var(--pf-red-color-150);
-}
-
-.bg-red-150 {
-  background-color: var(--pf-red-color-150);
-}
-
-.color-red-200 {
-  color: var(--pf-red-color-200);
-}
-
-.bg-red-200 {
-  background-color: var(--pf-red-color-200);
-}
-
-.color-red-250 {
-  color: var(--pf-red-color-250);
-}
-
-.bg-red-250 {
-  background-color: var(--pf-red-color-250);
-}
-
-.color-red-300 {
-  color: var(--pf-red-color-300);
-}
-
-.bg-red-300 {
-  background-color: var(--pf-red-color-300);
-}
-
-.color-red-350 {
-  color: var(--pf-red-color-350);
-}
-
-.bg-red-350 {
-  background-color: var(--pf-red-color-350);
-}
-
-.color-red-400 {
-  color: var(--pf-red-color-400);
-}
-
-.bg-red-400 {
-  background-color: var(--pf-red-color-400);
-}
-
-.color-red-450 {
-  color: var(--pf-red-color-450);
-}
-
-.bg-red-450 {
-  background-color: var(--pf-red-color-450);
-}
-
-.color-red-500 {
-  color: var(--pf-red-color-500);
-}
-
-.bg-red-500 {
-  background-color: var(--pf-red-color-500);
-}
-
-.color-red-550 {
-  color: var(--pf-red-color-550);
-}
-
-.bg-red-550 {
-  background-color: var(--pf-red-color-550);
-}
-
-.color-red-600 {
-  color: var(--pf-red-color-600);
-}
-
-.bg-red-600 {
-  background-color: var(--pf-red-color-600);
-}
-
-.color-red-650 {
-  color: var(--pf-red-color-650);
-}
-
-.bg-red-650 {
-  background-color: var(--pf-red-color-650);
-}
-
-.color-red-700 {
-  color: var(--pf-red-color-700);
-}
-
-.bg-red-700 {
-  background-color: var(--pf-red-color-700);
-}
-
-.color-red-750 {
-  color: var(--pf-red-color-750);
-}
-
-.bg-red-750 {
-  background-color: var(--pf-red-color-750);
-}
-
-.color-red-800 {
-  color: var(--pf-red-color-800);
-}
-
-.bg-red-800 {
-  background-color: var(--pf-red-color-800);
-}
-
-.color-red-850 {
-  color: var(--pf-red-color-850);
-}
-
-.bg-red-850 {
-  background-color: var(--pf-red-color-850);
-}
-
-.color-red-900 {
-  color: var(--pf-red-color-900);
-}
-
-.bg-red-900 {
-  background-color: var(--pf-red-color-900);
-}
-
-.color-red-950 {
-  color: var(--pf-red-color-950);
-}
-
-.bg-red-950 {
-  background-color: var(--pf-red-color-950);
-}
-
-.color-red-1000 {
-  color: var(--pf-red-color-1000);
-}
-
-.bg-red-1000 {
-  background-color: var(--pf-red-color-1000);
-}
-
-.color-orange {
-  color: var(--pf-orange-color);
-}
-
-.bg-orange {
-  background-color: var(--pf-orange-color);
-}
-
-.color-orange-50 {
-  color: var(--pf-orange-color-50);
-}
-
-.bg-orange-50 {
-  background-color: var(--pf-orange-color-50);
-}
-
-.color-orange-100 {
-  color: var(--pf-orange-color-100);
-}
-
-.bg-orange-100 {
-  background-color: var(--pf-orange-color-100);
-}
-
-.color-orange-150 {
-  color: var(--pf-orange-color-150);
-}
-
-.bg-orange-150 {
-  background-color: var(--pf-orange-color-150);
-}
-
-.color-orange-200 {
-  color: var(--pf-orange-color-200);
-}
-
-.bg-orange-200 {
-  background-color: var(--pf-orange-color-200);
-}
-
-.color-orange-250 {
-  color: var(--pf-orange-color-250);
-}
-
-.bg-orange-250 {
-  background-color: var(--pf-orange-color-250);
-}
-
-.color-orange-300 {
-  color: var(--pf-orange-color-300);
-}
-
-.bg-orange-300 {
-  background-color: var(--pf-orange-color-300);
-}
-
-.color-orange-350 {
-  color: var(--pf-orange-color-350);
-}
-
-.bg-orange-350 {
-  background-color: var(--pf-orange-color-350);
-}
-
-.color-orange-400 {
-  color: var(--pf-orange-color-400);
-}
-
-.bg-orange-400 {
-  background-color: var(--pf-orange-color-400);
-}
-
-.color-orange-450 {
-  color: var(--pf-orange-color-450);
-}
-
-.bg-orange-450 {
-  background-color: var(--pf-orange-color-450);
-}
-
-.color-orange-500 {
-  color: var(--pf-orange-color-500);
-}
-
-.bg-orange-500 {
-  background-color: var(--pf-orange-color-500);
-}
-
-.color-orange-550 {
-  color: var(--pf-orange-color-550);
-}
-
-.bg-orange-550 {
-  background-color: var(--pf-orange-color-550);
-}
-
-.color-orange-600 {
-  color: var(--pf-orange-color-600);
-}
-
-.bg-orange-600 {
-  background-color: var(--pf-orange-color-600);
-}
-
-.color-orange-650 {
-  color: var(--pf-orange-color-650);
-}
-
-.bg-orange-650 {
-  background-color: var(--pf-orange-color-650);
-}
-
-.color-orange-700 {
-  color: var(--pf-orange-color-700);
-}
-
-.bg-orange-700 {
-  background-color: var(--pf-orange-color-700);
-}
-
-.color-orange-750 {
-  color: var(--pf-orange-color-750);
-}
-
-.bg-orange-750 {
-  background-color: var(--pf-orange-color-750);
-}
-
-.color-orange-800 {
-  color: var(--pf-orange-color-800);
-}
-
-.bg-orange-800 {
-  background-color: var(--pf-orange-color-800);
-}
-
-.color-orange-850 {
-  color: var(--pf-orange-color-850);
-}
-
-.bg-orange-850 {
-  background-color: var(--pf-orange-color-850);
-}
-
-.color-orange-900 {
-  color: var(--pf-orange-color-900);
-}
-
-.bg-orange-900 {
-  background-color: var(--pf-orange-color-900);
-}
-
-.color-orange-950 {
-  color: var(--pf-orange-color-950);
-}
-
-.bg-orange-950 {
-  background-color: var(--pf-orange-color-950);
-}
-
-.color-orange-1000 {
-  color: var(--pf-orange-color-1000);
-}
-
-.bg-orange-1000 {
-  background-color: var(--pf-orange-color-1000);
-}
-
-.color-yellow {
-  color: var(--pf-yellow-color);
-}
-
-.bg-yellow {
-  background-color: var(--pf-yellow-color);
-}
-
-.color-yellow-50 {
-  color: var(--pf-yellow-color-50);
-}
-
-.bg-yellow-50 {
-  background-color: var(--pf-yellow-color-50);
-}
-
-.color-yellow-100 {
-  color: var(--pf-yellow-color-100);
-}
-
-.bg-yellow-100 {
-  background-color: var(--pf-yellow-color-100);
-}
-
-.color-yellow-150 {
-  color: var(--pf-yellow-color-150);
-}
-
-.bg-yellow-150 {
-  background-color: var(--pf-yellow-color-150);
-}
-
-.color-yellow-200 {
-  color: var(--pf-yellow-color-200);
-}
-
-.bg-yellow-200 {
-  background-color: var(--pf-yellow-color-200);
-}
-
-.color-yellow-250 {
-  color: var(--pf-yellow-color-250);
-}
-
-.bg-yellow-250 {
-  background-color: var(--pf-yellow-color-250);
-}
-
-.color-yellow-300 {
-  color: var(--pf-yellow-color-300);
-}
-
-.bg-yellow-300 {
-  background-color: var(--pf-yellow-color-300);
-}
-
-.color-yellow-350 {
-  color: var(--pf-yellow-color-350);
-}
-
-.bg-yellow-350 {
-  background-color: var(--pf-yellow-color-350);
-}
-
-.color-yellow-400 {
-  color: var(--pf-yellow-color-400);
-}
-
-.bg-yellow-400 {
-  background-color: var(--pf-yellow-color-400);
-}
-
-.color-yellow-450 {
-  color: var(--pf-yellow-color-450);
-}
-
-.bg-yellow-450 {
-  background-color: var(--pf-yellow-color-450);
-}
-
-.color-yellow-500 {
-  color: var(--pf-yellow-color-500);
-}
-
-.bg-yellow-500 {
-  background-color: var(--pf-yellow-color-500);
-}
-
-.color-yellow-550 {
-  color: var(--pf-yellow-color-550);
-}
-
-.bg-yellow-550 {
-  background-color: var(--pf-yellow-color-550);
-}
-
-.color-yellow-600 {
-  color: var(--pf-yellow-color-600);
-}
-
-.bg-yellow-600 {
-  background-color: var(--pf-yellow-color-600);
-}
-
-.color-yellow-650 {
-  color: var(--pf-yellow-color-650);
-}
-
-.bg-yellow-650 {
-  background-color: var(--pf-yellow-color-650);
-}
-
-.color-yellow-700 {
-  color: var(--pf-yellow-color-700);
-}
-
-.bg-yellow-700 {
-  background-color: var(--pf-yellow-color-700);
-}
-
-.color-yellow-750 {
-  color: var(--pf-yellow-color-750);
-}
-
-.bg-yellow-750 {
-  background-color: var(--pf-yellow-color-750);
-}
-
-.color-yellow-800 {
-  color: var(--pf-yellow-color-800);
-}
-
-.bg-yellow-800 {
-  background-color: var(--pf-yellow-color-800);
-}
-
-.color-yellow-850 {
-  color: var(--pf-yellow-color-850);
-}
-
-.bg-yellow-850 {
-  background-color: var(--pf-yellow-color-850);
-}
-
-.color-yellow-900 {
-  color: var(--pf-yellow-color-900);
-}
-
-.bg-yellow-900 {
-  background-color: var(--pf-yellow-color-900);
-}
-
-.color-yellow-950 {
-  color: var(--pf-yellow-color-950);
-}
-
-.bg-yellow-950 {
-  background-color: var(--pf-yellow-color-950);
-}
-
-.color-yellow-1000 {
-  color: var(--pf-yellow-color-1000);
-}
-
-.bg-yellow-1000 {
-  background-color: var(--pf-yellow-color-1000);
-}
-
-.color-green {
-  color: var(--pf-green-color);
-}
-
-.bg-green {
-  background-color: var(--pf-green-color);
-}
-
-.color-green-50 {
-  color: var(--pf-green-color-50);
-}
-
-.bg-green-50 {
-  background-color: var(--pf-green-color-50);
-}
-
-.color-green-100 {
-  color: var(--pf-green-color-100);
-}
-
-.bg-green-100 {
-  background-color: var(--pf-green-color-100);
-}
-
-.color-green-150 {
-  color: var(--pf-green-color-150);
-}
-
-.bg-green-150 {
-  background-color: var(--pf-green-color-150);
-}
-
-.color-green-200 {
-  color: var(--pf-green-color-200);
-}
-
-.bg-green-200 {
-  background-color: var(--pf-green-color-200);
-}
-
-.color-green-250 {
-  color: var(--pf-green-color-250);
-}
-
-.bg-green-250 {
-  background-color: var(--pf-green-color-250);
-}
-
-.color-green-300 {
-  color: var(--pf-green-color-300);
-}
-
-.bg-green-300 {
-  background-color: var(--pf-green-color-300);
-}
-
-.color-green-350 {
-  color: var(--pf-green-color-350);
-}
-
-.bg-green-350 {
-  background-color: var(--pf-green-color-350);
-}
-
-.color-green-400 {
-  color: var(--pf-green-color-400);
-}
-
-.bg-green-400 {
-  background-color: var(--pf-green-color-400);
-}
-
-.color-green-450 {
-  color: var(--pf-green-color-450);
-}
-
-.bg-green-450 {
-  background-color: var(--pf-green-color-450);
-}
-
-.color-green-500 {
-  color: var(--pf-green-color-500);
-}
-
-.bg-green-500 {
-  background-color: var(--pf-green-color-500);
-}
-
-.color-green-550 {
-  color: var(--pf-green-color-550);
-}
-
-.bg-green-550 {
-  background-color: var(--pf-green-color-550);
-}
-
-.color-green-600 {
-  color: var(--pf-green-color-600);
-}
-
-.bg-green-600 {
-  background-color: var(--pf-green-color-600);
-}
-
-.color-green-650 {
-  color: var(--pf-green-color-650);
-}
-
-.bg-green-650 {
-  background-color: var(--pf-green-color-650);
-}
-
-.color-green-700 {
-  color: var(--pf-green-color-700);
-}
-
-.bg-green-700 {
-  background-color: var(--pf-green-color-700);
-}
-
-.color-green-750 {
-  color: var(--pf-green-color-750);
-}
-
-.bg-green-750 {
-  background-color: var(--pf-green-color-750);
-}
-
-.color-green-800 {
-  color: var(--pf-green-color-800);
-}
-
-.bg-green-800 {
-  background-color: var(--pf-green-color-800);
-}
-
-.color-green-850 {
-  color: var(--pf-green-color-850);
-}
-
-.bg-green-850 {
-  background-color: var(--pf-green-color-850);
-}
-
-.color-green-900 {
-  color: var(--pf-green-color-900);
-}
-
-.bg-green-900 {
-  background-color: var(--pf-green-color-900);
-}
-
-.color-green-950 {
-  color: var(--pf-green-color-950);
-}
-
-.bg-green-950 {
-  background-color: var(--pf-green-color-950);
-}
-
-.color-green-1000 {
-  color: var(--pf-green-color-1000);
-}
-
-.bg-green-1000 {
-  background-color: var(--pf-green-color-1000);
-}
-
-.color-purple {
-  color: var(--pf-purple-color);
-}
-
-.bg-purple {
-  background-color: var(--pf-purple-color);
-}
-
-.color-purple-50 {
-  color: var(--pf-purple-color-50);
-}
-
-.bg-purple-50 {
-  background-color: var(--pf-purple-color-50);
-}
-
-.color-purple-100 {
-  color: var(--pf-purple-color-100);
-}
-
-.bg-purple-100 {
-  background-color: var(--pf-purple-color-100);
-}
-
-.color-purple-150 {
-  color: var(--pf-purple-color-150);
-}
-
-.bg-purple-150 {
-  background-color: var(--pf-purple-color-150);
-}
-
-.color-purple-200 {
-  color: var(--pf-purple-color-200);
-}
-
-.bg-purple-200 {
-  background-color: var(--pf-purple-color-200);
-}
-
-.color-purple-250 {
-  color: var(--pf-purple-color-250);
-}
-
-.bg-purple-250 {
-  background-color: var(--pf-purple-color-250);
-}
-
-.color-purple-300 {
-  color: var(--pf-purple-color-300);
-}
-
-.bg-purple-300 {
-  background-color: var(--pf-purple-color-300);
-}
-
-.color-purple-350 {
-  color: var(--pf-purple-color-350);
-}
-
-.bg-purple-350 {
-  background-color: var(--pf-purple-color-350);
-}
-
-.color-purple-400 {
-  color: var(--pf-purple-color-400);
-}
-
-.bg-purple-400 {
-  background-color: var(--pf-purple-color-400);
-}
-
-.color-purple-450 {
-  color: var(--pf-purple-color-450);
-}
-
-.bg-purple-450 {
-  background-color: var(--pf-purple-color-450);
-}
-
-.color-purple-500 {
-  color: var(--pf-purple-color-500);
-}
-
-.bg-purple-500 {
-  background-color: var(--pf-purple-color-500);
-}
-
-.color-purple-550 {
-  color: var(--pf-purple-color-550);
-}
-
-.bg-purple-550 {
-  background-color: var(--pf-purple-color-550);
-}
-
-.color-purple-600 {
-  color: var(--pf-purple-color-600);
-}
-
-.bg-purple-600 {
-  background-color: var(--pf-purple-color-600);
-}
-
-.color-purple-650 {
-  color: var(--pf-purple-color-650);
-}
-
-.bg-purple-650 {
-  background-color: var(--pf-purple-color-650);
-}
-
-.color-purple-700 {
-  color: var(--pf-purple-color-700);
-}
-
-.bg-purple-700 {
-  background-color: var(--pf-purple-color-700);
-}
-
-.color-purple-750 {
-  color: var(--pf-purple-color-750);
-}
-
-.bg-purple-750 {
-  background-color: var(--pf-purple-color-750);
-}
-
-.color-purple-800 {
-  color: var(--pf-purple-color-800);
-}
-
-.bg-purple-800 {
-  background-color: var(--pf-purple-color-800);
-}
-
-.color-purple-850 {
-  color: var(--pf-purple-color-850);
-}
-
-.bg-purple-850 {
-  background-color: var(--pf-purple-color-850);
-}
-
-.color-purple-900 {
-  color: var(--pf-purple-color-900);
-}
-
-.bg-purple-900 {
-  background-color: var(--pf-purple-color-900);
-}
-
-.color-purple-950 {
-  color: var(--pf-purple-color-950);
-}
-
-.bg-purple-950 {
-  background-color: var(--pf-purple-color-950);
-}
-
-.color-purple-1000 {
-  color: var(--pf-purple-color-1000);
-}
-
-.bg-purple-1000 {
-  background-color: var(--pf-purple-color-1000);
-}
-
-.color-pink {
-  color: var(--pf-pink-color);
-}
-
-.bg-pink {
-  background-color: var(--pf-pink-color);
-}
-
-.color-pink-50 {
-  color: var(--pf-pink-color-50);
-}
-
-.bg-pink-50 {
-  background-color: var(--pf-pink-color-50);
-}
-
-.color-pink-100 {
-  color: var(--pf-pink-color-100);
-}
-
-.bg-pink-100 {
-  background-color: var(--pf-pink-color-100);
-}
-
-.color-pink-150 {
-  color: var(--pf-pink-color-150);
-}
-
-.bg-pink-150 {
-  background-color: var(--pf-pink-color-150);
-}
-
-.color-pink-200 {
-  color: var(--pf-pink-color-200);
-}
-
-.bg-pink-200 {
-  background-color: var(--pf-pink-color-200);
-}
-
-.color-pink-250 {
-  color: var(--pf-pink-color-250);
-}
-
-.bg-pink-250 {
-  background-color: var(--pf-pink-color-250);
-}
-
-.color-pink-300 {
-  color: var(--pf-pink-color-300);
-}
-
-.bg-pink-300 {
-  background-color: var(--pf-pink-color-300);
-}
-
-.color-pink-350 {
-  color: var(--pf-pink-color-350);
-}
-
-.bg-pink-350 {
-  background-color: var(--pf-pink-color-350);
-}
-
-.color-pink-400 {
-  color: var(--pf-pink-color-400);
-}
-
-.bg-pink-400 {
-  background-color: var(--pf-pink-color-400);
-}
-
-.color-pink-450 {
-  color: var(--pf-pink-color-450);
-}
-
-.bg-pink-450 {
-  background-color: var(--pf-pink-color-450);
-}
-
-.color-pink-500 {
-  color: var(--pf-pink-color-500);
-}
-
-.bg-pink-500 {
-  background-color: var(--pf-pink-color-500);
-}
-
-.color-pink-550 {
-  color: var(--pf-pink-color-550);
-}
-
-.bg-pink-550 {
-  background-color: var(--pf-pink-color-550);
-}
-
-.color-pink-600 {
-  color: var(--pf-pink-color-600);
-}
-
-.bg-pink-600 {
-  background-color: var(--pf-pink-color-600);
-}
-
-.color-pink-650 {
-  color: var(--pf-pink-color-650);
-}
-
-.bg-pink-650 {
-  background-color: var(--pf-pink-color-650);
-}
-
-.color-pink-700 {
-  color: var(--pf-pink-color-700);
-}
-
-.bg-pink-700 {
-  background-color: var(--pf-pink-color-700);
-}
-
-.color-pink-750 {
-  color: var(--pf-pink-color-750);
-}
-
-.bg-pink-750 {
-  background-color: var(--pf-pink-color-750);
-}
-
-.color-pink-800 {
-  color: var(--pf-pink-color-800);
-}
-
-.bg-pink-800 {
-  background-color: var(--pf-pink-color-800);
-}
-
-.color-pink-850 {
-  color: var(--pf-pink-color-850);
-}
-
-.bg-pink-850 {
-  background-color: var(--pf-pink-color-850);
-}
-
-.color-pink-900 {
-  color: var(--pf-pink-color-900);
-}
-
-.bg-pink-900 {
-  background-color: var(--pf-pink-color-900);
-}
-
-.color-pink-950 {
-  color: var(--pf-pink-color-950);
-}
-
-.bg-pink-950 {
-  background-color: var(--pf-pink-color-950);
-}
-
-.color-pink-1000 {
-  color: var(--pf-pink-color-1000);
-}
-
-.bg-pink-1000 {
-  background-color: var(--pf-pink-color-1000);
-}
-
-.color-teal {
-  color: var(--pf-teal-color);
-}
-
-.bg-teal {
-  background-color: var(--pf-teal-color);
-}
-
-.color-teal-50 {
-  color: var(--pf-teal-color-50);
-}
-
-.bg-teal-50 {
-  background-color: var(--pf-teal-color-50);
-}
-
-.color-teal-100 {
-  color: var(--pf-teal-color-100);
-}
-
-.bg-teal-100 {
-  background-color: var(--pf-teal-color-100);
-}
-
-.color-teal-150 {
-  color: var(--pf-teal-color-150);
-}
-
-.bg-teal-150 {
-  background-color: var(--pf-teal-color-150);
-}
-
-.color-teal-200 {
-  color: var(--pf-teal-color-200);
-}
-
-.bg-teal-200 {
-  background-color: var(--pf-teal-color-200);
-}
-
-.color-teal-250 {
-  color: var(--pf-teal-color-250);
-}
-
-.bg-teal-250 {
-  background-color: var(--pf-teal-color-250);
-}
-
-.color-teal-300 {
-  color: var(--pf-teal-color-300);
-}
-
-.bg-teal-300 {
-  background-color: var(--pf-teal-color-300);
-}
-
-.color-teal-350 {
-  color: var(--pf-teal-color-350);
-}
-
-.bg-teal-350 {
-  background-color: var(--pf-teal-color-350);
-}
-
-.color-teal-400 {
-  color: var(--pf-teal-color-400);
-}
-
-.bg-teal-400 {
-  background-color: var(--pf-teal-color-400);
-}
-
-.color-teal-450 {
-  color: var(--pf-teal-color-450);
-}
-
-.bg-teal-450 {
-  background-color: var(--pf-teal-color-450);
-}
-
-.color-teal-500 {
-  color: var(--pf-teal-color-500);
-}
-
-.bg-teal-500 {
-  background-color: var(--pf-teal-color-500);
-}
-
-.color-teal-550 {
-  color: var(--pf-teal-color-550);
-}
-
-.bg-teal-550 {
-  background-color: var(--pf-teal-color-550);
-}
-
-.color-teal-600 {
-  color: var(--pf-teal-color-600);
-}
-
-.bg-teal-600 {
-  background-color: var(--pf-teal-color-600);
-}
-
-.color-teal-650 {
-  color: var(--pf-teal-color-650);
-}
-
-.bg-teal-650 {
-  background-color: var(--pf-teal-color-650);
-}
-
-.color-teal-700 {
-  color: var(--pf-teal-color-700);
-}
-
-.bg-teal-700 {
-  background-color: var(--pf-teal-color-700);
-}
-
-.color-teal-750 {
-  color: var(--pf-teal-color-750);
-}
-
-.bg-teal-750 {
-  background-color: var(--pf-teal-color-750);
-}
-
-.color-teal-800 {
-  color: var(--pf-teal-color-800);
-}
-
-.bg-teal-800 {
-  background-color: var(--pf-teal-color-800);
-}
-
-.color-teal-850 {
-  color: var(--pf-teal-color-850);
-}
-
-.bg-teal-850 {
-  background-color: var(--pf-teal-color-850);
-}
-
-.color-teal-900 {
-  color: var(--pf-teal-color-900);
-}
-
-.bg-teal-900 {
-  background-color: var(--pf-teal-color-900);
-}
-
-.color-teal-950 {
-  color: var(--pf-teal-color-950);
-}
-
-.bg-teal-950 {
-  background-color: var(--pf-teal-color-950);
-}
-
-.color-teal-1000 {
-  color: var(--pf-teal-color-1000);
-}
-
-.bg-teal-1000 {
-  background-color: var(--pf-teal-color-1000);
-}
-
-.color-blue {
-  color: var(--pf-blue-color);
-}
-
-.bg-blue {
-  background-color: var(--pf-blue-color);
-}
-
-.color-blue-50 {
-  color: var(--pf-blue-color-50);
-}
-
-.bg-blue-50 {
-  background-color: var(--pf-blue-color-50);
-}
-
-.color-blue-100 {
-  color: var(--pf-blue-color-100);
-}
-
-.bg-blue-100 {
-  background-color: var(--pf-blue-color-100);
-}
-
-.color-blue-150 {
-  color: var(--pf-blue-color-150);
-}
-
-.bg-blue-150 {
-  background-color: var(--pf-blue-color-150);
-}
-
-.color-blue-200 {
-  color: var(--pf-blue-color-200);
-}
-
-.bg-blue-200 {
-  background-color: var(--pf-blue-color-200);
-}
-
-.color-blue-250 {
-  color: var(--pf-blue-color-250);
-}
-
-.bg-blue-250 {
-  background-color: var(--pf-blue-color-250);
-}
-
-.color-blue-300 {
-  color: var(--pf-blue-color-300);
-}
-
-.bg-blue-300 {
-  background-color: var(--pf-blue-color-300);
-}
-
-.color-blue-350 {
-  color: var(--pf-blue-color-350);
-}
-
-.bg-blue-350 {
-  background-color: var(--pf-blue-color-350);
-}
-
-.color-blue-400 {
-  color: var(--pf-blue-color-400);
-}
-
-.bg-blue-400 {
-  background-color: var(--pf-blue-color-400);
-}
-
-.color-blue-450 {
-  color: var(--pf-blue-color-450);
-}
-
-.bg-blue-450 {
-  background-color: var(--pf-blue-color-450);
-}
-
-.color-blue-500 {
-  color: var(--pf-blue-color-500);
-}
-
-.bg-blue-500 {
-  background-color: var(--pf-blue-color-500);
-}
-
-.color-blue-550 {
-  color: var(--pf-blue-color-550);
-}
-
-.bg-blue-550 {
-  background-color: var(--pf-blue-color-550);
-}
-
-.color-blue-600 {
-  color: var(--pf-blue-color-600);
-}
-
-.bg-blue-600 {
-  background-color: var(--pf-blue-color-600);
-}
-
-.color-blue-650 {
-  color: var(--pf-blue-color-650);
-}
-
-.bg-blue-650 {
-  background-color: var(--pf-blue-color-650);
-}
-
-.color-blue-700 {
-  color: var(--pf-blue-color-700);
-}
-
-.bg-blue-700 {
-  background-color: var(--pf-blue-color-700);
-}
-
-.color-blue-750 {
-  color: var(--pf-blue-color-750);
-}
-
-.bg-blue-750 {
-  background-color: var(--pf-blue-color-750);
-}
-
-.color-blue-800 {
-  color: var(--pf-blue-color-800);
-}
-
-.bg-blue-800 {
-  background-color: var(--pf-blue-color-800);
-}
-
-.color-blue-850 {
-  color: var(--pf-blue-color-850);
-}
-
-.bg-blue-850 {
-  background-color: var(--pf-blue-color-850);
-}
-
-.color-blue-900 {
-  color: var(--pf-blue-color-900);
-}
-
-.bg-blue-900 {
-  background-color: var(--pf-blue-color-900);
-}
-
-.color-blue-950 {
-  color: var(--pf-blue-color-950);
-}
-
-.bg-blue-950 {
-  background-color: var(--pf-blue-color-950);
-}
-
-.color-blue-1000 {
-  color: var(--pf-blue-color-1000);
-}
-
-.bg-blue-1000 {
-  background-color: var(--pf-blue-color-1000);
-}
-
-.color-white {
-  color: var(--pf-white-color);
-}
-
-.bg-white {
-  background-color: var(--pf-white-color);
-}
-
-.color-white-50 {
-  color: var(--pf-white-color-50);
-}
-
-.bg-white-50 {
-  background-color: var(--pf-white-color-50);
-}
-
-.color-white-100 {
-  color: var(--pf-white-color-100);
-}
-
-.bg-white-100 {
-  background-color: var(--pf-white-color-100);
-}
-
-.color-white-150 {
-  color: var(--pf-white-color-150);
-}
-
-.bg-white-150 {
-  background-color: var(--pf-white-color-150);
-}
-
-.color-white-200 {
-  color: var(--pf-white-color-200);
-}
-
-.bg-white-200 {
-  background-color: var(--pf-white-color-200);
-}
-
-.color-white-250 {
-  color: var(--pf-white-color-250);
-}
-
-.bg-white-250 {
-  background-color: var(--pf-white-color-250);
-}
-
-.color-white-300 {
-  color: var(--pf-white-color-300);
-}
-
-.bg-white-300 {
-  background-color: var(--pf-white-color-300);
-}
-
-.color-white-350 {
-  color: var(--pf-white-color-350);
-}
-
-.bg-white-350 {
-  background-color: var(--pf-white-color-350);
-}
-
-.color-white-400 {
-  color: var(--pf-white-color-400);
-}
-
-.bg-white-400 {
-  background-color: var(--pf-white-color-400);
-}
-
-.color-white-450 {
-  color: var(--pf-white-color-450);
-}
-
-.bg-white-450 {
-  background-color: var(--pf-white-color-450);
-}
-
-.color-white-500 {
-  color: var(--pf-white-color-500);
-}
-
-.bg-white-500 {
-  background-color: var(--pf-white-color-500);
-}
-
-.color-white-550 {
-  color: var(--pf-white-color-550);
-}
-
-.bg-white-550 {
-  background-color: var(--pf-white-color-550);
-}
-
-.color-white-600 {
-  color: var(--pf-white-color-600);
-}
-
-.bg-white-600 {
-  background-color: var(--pf-white-color-600);
-}
-
-.color-white-650 {
-  color: var(--pf-white-color-650);
-}
-
-.bg-white-650 {
-  background-color: var(--pf-white-color-650);
-}
-
-.color-white-700 {
-  color: var(--pf-white-color-700);
-}
-
-.bg-white-700 {
-  background-color: var(--pf-white-color-700);
-}
-
-.color-white-750 {
-  color: var(--pf-white-color-750);
-}
-
-.bg-white-750 {
-  background-color: var(--pf-white-color-750);
-}
-
-.color-white-800 {
-  color: var(--pf-white-color-800);
-}
-
-.bg-white-800 {
-  background-color: var(--pf-white-color-800);
-}
-
-.color-white-850 {
-  color: var(--pf-white-color-850);
-}
-
-.bg-white-850 {
-  background-color: var(--pf-white-color-850);
-}
-
-.color-white-900 {
-  color: var(--pf-white-color-900);
-}
-
-.bg-white-900 {
-  background-color: var(--pf-white-color-900);
-}
-
-.color-white-950 {
-  color: var(--pf-white-color-950);
-}
-
-.bg-white-950 {
-  background-color: var(--pf-white-color-950);
-}
-
-.color-white-1000 {
-  color: var(--pf-white-color-1000);
-}
-
-.bg-white-1000 {
-  background-color: var(--pf-white-color-1000);
-}
-
-.color-black {
-  color: var(--pf-black-color);
-}
-
-.bg-black {
-  background-color: var(--pf-black-color);
-}
-
-.color-black-50 {
-  color: var(--pf-black-color-50);
-}
-
-.bg-black-50 {
-  background-color: var(--pf-black-color-50);
-}
-
-.color-black-100 {
-  color: var(--pf-black-color-100);
-}
-
-.bg-black-100 {
-  background-color: var(--pf-black-color-100);
-}
-
-.color-black-150 {
-  color: var(--pf-black-color-150);
-}
-
-.bg-black-150 {
-  background-color: var(--pf-black-color-150);
-}
-
-.color-black-200 {
-  color: var(--pf-black-color-200);
-}
-
-.bg-black-200 {
-  background-color: var(--pf-black-color-200);
-}
-
-.color-black-250 {
-  color: var(--pf-black-color-250);
-}
-
-.bg-black-250 {
-  background-color: var(--pf-black-color-250);
-}
-
-.color-black-300 {
-  color: var(--pf-black-color-300);
-}
-
-.bg-black-300 {
-  background-color: var(--pf-black-color-300);
-}
-
-.color-black-350 {
-  color: var(--pf-black-color-350);
-}
-
-.bg-black-350 {
-  background-color: var(--pf-black-color-350);
-}
-
-.color-black-400 {
-  color: var(--pf-black-color-400);
-}
-
-.bg-black-400 {
-  background-color: var(--pf-black-color-400);
-}
-
-.color-black-450 {
-  color: var(--pf-black-color-450);
-}
-
-.bg-black-450 {
-  background-color: var(--pf-black-color-450);
-}
-
-.color-black-500 {
-  color: var(--pf-black-color-500);
-}
-
-.bg-black-500 {
-  background-color: var(--pf-black-color-500);
-}
-
-.color-black-550 {
-  color: var(--pf-black-color-550);
-}
-
-.bg-black-550 {
-  background-color: var(--pf-black-color-550);
-}
-
-.color-black-600 {
-  color: var(--pf-black-color-600);
-}
-
-.bg-black-600 {
-  background-color: var(--pf-black-color-600);
-}
-
-.color-black-650 {
-  color: var(--pf-black-color-650);
-}
-
-.bg-black-650 {
-  background-color: var(--pf-black-color-650);
-}
-
-.color-black-700 {
-  color: var(--pf-black-color-700);
-}
-
-.bg-black-700 {
-  background-color: var(--pf-black-color-700);
-}
-
-.color-black-750 {
-  color: var(--pf-black-color-750);
-}
-
-.bg-black-750 {
-  background-color: var(--pf-black-color-750);
-}
-
-.color-black-800 {
-  color: var(--pf-black-color-800);
-}
-
-.bg-black-800 {
-  background-color: var(--pf-black-color-800);
-}
-
-.color-black-850 {
-  color: var(--pf-black-color-850);
-}
-
-.bg-black-850 {
-  background-color: var(--pf-black-color-850);
-}
-
-.color-black-900 {
-  color: var(--pf-black-color-900);
-}
-
-.bg-black-900 {
-  background-color: var(--pf-black-color-900);
-}
-
-.color-black-950 {
-  color: var(--pf-black-color-950);
-}
-
-.bg-black-950 {
-  background-color: var(--pf-black-color-950);
-}
-
-.color-black-1000 {
-  color: var(--pf-black-color-1000);
-}
-
-.bg-black-1000 {
-  background-color: var(--pf-black-color-1000);
-}
-
-.color-success {
-  color: var(--pf-semantic-utility-success-default);
-}
-
-.bg-success {
-  background-color: var(--pf-semantic-utility-success-default);
-}
-
-.color-info {
-  color: var(--pf-semantic-utility-info-default);
-}
-
-.bg-info {
-  background-color: var(--pf-semantic-utility-info-default);
+:root,
+:root [data-theme=light] {
+  --pf-pill-outline-red-bg: var(--pf-red-color-150);
+  --pf-pill-outline-red-text: var(--pf-red-color-500);
+  --pf-pill-outline-red-border: var(--pf-red-color-250);
+  --pf-pill-outline-red-dot: var(--pf-red-color-400);
+  --pf-pill-outline-red-icon: var(--pf-red-color-450);
+  --pf-pill-outline-red-close: var(--pf-red-color-300);
+  --pf-pill-outline-red-close-hover: var(--pf-red-color-400);
+  --pf-pill-outline-red-close-hover-bg: var(--pf-red-color-100);
+  --pf-pill-outline-purple-bg: var(--pf-purple-color-150);
+  --pf-pill-outline-purple-text: var(--pf-purple-color-500);
+  --pf-pill-outline-purple-border: var(--pf-purple-color-250);
+  --pf-pill-outline-purple-dot: var(--pf-purple-color-400);
+  --pf-pill-outline-purple-icon: var(--pf-purple-color-400);
+  --pf-pill-outline-purple-close: var(--pf-purple-color-300);
+  --pf-pill-outline-purple-close-hover: var(--pf-purple-color-400);
+  --pf-pill-outline-purple-close-hover-bg: var(--pf-purple-color-100);
+  --pf-pill-outline-yellow-bg: var(--pf-yellow-color-150);
+  --pf-pill-outline-yellow-text: var(--pf-yellow-color-600);
+  --pf-pill-outline-yellow-border: var(--pf-yellow-color-250);
+  --pf-pill-outline-yellow-dot: var(--pf-yellow-color-500);
+  --pf-pill-outline-yellow-icon: var(--pf-yellow-color-500);
+  --pf-pill-outline-yellow-close: var(--pf-yellow-color-400);
+  --pf-pill-outline-yellow-close-hover: var(--pf-yellow-color-450);
+  --pf-pill-outline-yellow-close-hover-bg: var(--pf-yellow-color-100);
+  --pf-pill-outline-blue-bg: var(--pf-blue-color-150);
+  --pf-pill-outline-blue-text: var(--pf-blue-color-500);
+  --pf-pill-outline-blue-border: var(--pf-blue-color-250);
+  --pf-pill-outline-blue-dot: var(--pf-blue-color-400);
+  --pf-pill-outline-blue-icon: var(--pf-blue-color-450);
+  --pf-pill-outline-blue-close: var(--pf-blue-color-300);
+  --pf-pill-outline-blue-close-hover: var(--pf-blue-color-400);
+  --pf-pill-outline-blue-close-hover-bg: var(--pf-blue-color-100);
+  --pf-pill-outline-green-bg: var(--pf-green-color-150);
+  --pf-pill-outline-green-text: var(--pf-green-color-700);
+  --pf-pill-outline-green-border: var(--pf-green-color-250);
+  --pf-pill-outline-green-dot: var(--pf-green-color-500);
+  --pf-pill-outline-green-icon: var(--pf-green-color-500);
+  --pf-pill-outline-green-close: var(--pf-green-color-300);
+  --pf-pill-outline-green-close-hover: var(--pf-green-color-450);
+  --pf-pill-outline-green-close-hover-bg: var(--pf-green-color-100);
+  --pf-pill-outline-gray-bg: var(--pf-gray-color-150);
+  --pf-pill-outline-gray-text: var(--pf-gray-color-700);
+  --pf-pill-outline-gray-border: var(--pf-gray-color-250);
+  --pf-pill-outline-gray-dot: var(--pf-gray-color-550);
+  --pf-pill-outline-gray-icon: var(--pf-gray-color-550);
+  --pf-pill-outline-gray-close: var(--pf-gray-color-500);
+  --pf-pill-outline-gray-close-hover: var(--pf-gray-color-550);
+  --pf-pill-outline-gray-close-hover-bg: var(--pf-gray-color-100);
+  --pf-pill-outline-pink-bg: var(--pf-pink-color-150);
+  --pf-pill-outline-pink-text: var(--pf-pink-color-500);
+  --pf-pill-outline-pink-border: var(--pf-pink-color-250);
+  --pf-pill-outline-pink-dot: var(--pf-pink-color-400);
+  --pf-pill-outline-pink-icon: var(--pf-pink-color-400);
+  --pf-pill-outline-pink-close: var(--pf-pink-color-300);
+  --pf-pill-outline-pink-close-hover: var(--pf-pink-color-400);
+  --pf-pill-outline-pink-close-hover-bg: var(--pf-pink-color-100);
+  --pf-pill-outline-orange-bg: var(--pf-orange-color-150);
+  --pf-pill-outline-orange-text: var(--pf-orange-color-500);
+  --pf-pill-outline-orange-border: var(--pf-orange-color-250);
+  --pf-pill-outline-orange-dot: var(--pf-orange-color-400);
+  --pf-pill-outline-orange-icon: var(--pf-orange-color-400);
+  --pf-pill-outline-orange-close: var(--pf-orange-color-300);
+  --pf-pill-outline-orange-close-hover: var(--pf-orange-color-400);
+  --pf-pill-outline-orange-close-hover-bg: var(--pf-orange-color-100);
+  --pf-pill-outline-teal-bg: var(--pf-teal-color-150);
+  --pf-pill-outline-teal-text: var(--pf-teal-color-550);
+  --pf-pill-outline-teal-border: var(--pf-teal-color-250);
+  --pf-pill-outline-teal-dot: var(--pf-teal-color-500);
+  --pf-pill-outline-teal-icon: var(--pf-teal-color-500);
+  --pf-pill-outline-teal-close: var(--pf-teal-color-400);
+  --pf-pill-outline-teal-close-hover: var(--pf-teal-color-450);
+  --pf-pill-outline-teal-close-hover-bg: var(--pf-teal-color-100);
+  --pf-pill-outline-soft-bg: var(--pf-gray-color-100);
+  --pf-pill-outline-soft-text: var(--pf-gray-color-800);
+  --pf-pill-outline-soft-border: var(--pf-gray-color-200);
+  --pf-pill-outline-soft-dot: var(--pf-gray-color-800);
+  --pf-pill-outline-soft-icon: var(--pf-gray-color-800);
+  --pf-pill-outline-soft-close: var(--pf-gray-color-800);
+  --pf-pill-outline-soft-close-hover: var(--pf-gray-color-500);
+  --pf-pill-outline-soft-close-hover-bg: var(--pf-gray-color-50);
+  --pf-pill-solid-red-bg: var(--pf-red-color-450);
+  --pf-pill-solid-red-text: var(--pf-red-color-50);
+  --pf-pill-solid-red-dot: var(--pf-red-color-250);
+  --pf-pill-solid-red-icon: var(--pf-red-color-50);
+  --pf-pill-solid-red-close: var(--pf-red-color-300);
+  --pf-pill-solid-red-close-hover: var(--pf-red-color-250);
+  --pf-pill-solid-red-close-hover-bg: var(--pf-opacity-white-200);
+  --pf-pill-solid-purple-bg: var(--pf-purple-color-450);
+  --pf-pill-solid-purple-text: var(--pf-purple-color-100);
+  --pf-pill-solid-purple-dot: var(--pf-purple-color-300);
+  --pf-pill-solid-purple-icon: var(--pf-purple-color-100);
+  --pf-pill-solid-purple-close: var(--pf-purple-color-300);
+  --pf-pill-solid-purple-close-hover: var(--pf-purple-color-250);
+  --pf-pill-solid-purple-close-hover-bg: var(--pf-opacity-white-200);
+  --pf-pill-solid-yellow-bg: var(--pf-yellow-color-550);
+  --pf-pill-solid-yellow-text: var(--pf-gray-color-50);
+  --pf-pill-solid-yellow-dot: var(--pf-yellow-color-300);
+  --pf-pill-solid-yellow-icon: var(--pf-yellow-color-50);
+  --pf-pill-solid-yellow-close: var(--pf-yellow-color-400);
+  --pf-pill-solid-yellow-close-hover: var(--pf-yellow-color-300);
+  --pf-pill-solid-yellow-close-hover-bg: var(--pf-opacity-white-250);
+  --pf-pill-solid-blue-bg: var(--pf-blue-color-500);
+  --pf-pill-solid-blue-text: var(--pf-blue-color-50);
+  --pf-pill-solid-blue-dot: var(--pf-blue-color-300);
+  --pf-pill-solid-blue-icon: var(--pf-blue-color-50);
+  --pf-pill-solid-blue-close: var(--pf-blue-color-300);
+  --pf-pill-solid-blue-close-hover: var(--pf-blue-color-250);
+  --pf-pill-solid-blue-close-hover-bg: var(--pf-opacity-white-250);
+  --pf-pill-solid-green-bg: var(--pf-green-color-600);
+  --pf-pill-solid-green-text: var(--pf-green-color-100);
+  --pf-pill-solid-green-dot: var(--pf-green-color-450);
+  --pf-pill-solid-green-icon: var(--pf-green-color-100);
+  --pf-pill-solid-green-close: var(--pf-green-color-300);
+  --pf-pill-solid-green-close-hover: var(--pf-green-color-250);
+  --pf-pill-solid-green-close-hover-bg: var(--pf-opacity-white-200);
+  --pf-pill-solid-gray-bg: var(--pf-gray-color-700);
+  --pf-pill-solid-gray-text: var(--pf-gray-color-50);
+  --pf-pill-solid-gray-dot: var(--pf-gray-color-400);
+  --pf-pill-solid-gray-icon: var(--pf-gray-color-50);
+  --pf-pill-solid-gray-close: var(--pf-gray-color-500);
+  --pf-pill-solid-gray-close-hover: var(--pf-gray-color-450);
+  --pf-pill-solid-gray-close-hover-bg: var(--pf-opacity-white-200);
+  --pf-pill-solid-pink-bg: var(--pf-pink-color-450);
+  --pf-pill-solid-pink-text: var(--pf-pink-color-150);
+  --pf-pill-solid-pink-dot: var(--pf-pink-color-300);
+  --pf-pill-solid-pink-icon: var(--pf-pink-color-150);
+  --pf-pill-solid-pink-close: var(--pf-pink-color-300);
+  --pf-pill-solid-pink-close-hover: var(--pf-pink-color-250);
+  --pf-pill-solid-pink-close-hover-bg: var(--pf-opacity-white-250);
+  --pf-pill-solid-orange-bg: var(--pf-orange-color-450);
+  --pf-pill-solid-orange-text: var(--pf-orange-color-50);
+  --pf-pill-solid-orange-dot: var(--pf-orange-color-300);
+  --pf-pill-solid-orange-icon: var(--pf-orange-color-50);
+  --pf-pill-solid-orange-close: var(--pf-orange-color-300);
+  --pf-pill-solid-orange-close-hover: var(--pf-orange-color-250);
+  --pf-pill-solid-orange-close-hover-bg: var(--pf-opacity-white-250);
+  --pf-pill-solid-teal-bg: var(--pf-teal-color-550);
+  --pf-pill-solid-teal-text: var(--pf-teal-color-100);
+  --pf-pill-solid-teal-dot: var(--pf-teal-color-250);
+  --pf-pill-solid-teal-icon: var(--pf-teal-color-100);
+  --pf-pill-solid-teal-close: var(--pf-teal-color-400);
+  --pf-pill-solid-teal-close-hover: var(--pf-teal-color-450);
+  --pf-pill-solid-teal-close-hover-bg: var(--pf-opacity-white-200);
+  --pf-pill-solid-soft-bg: var(--pf-gray-color-200);
+  --pf-pill-solid-soft-text: var(--pf-gray-color-800);
+  --pf-pill-solid-soft-dot: var(--pf-gray-color-800);
+  --pf-pill-solid-soft-icon: var(--pf-gray-color-800);
+  --pf-pill-solid-soft-close: var(--pf-gray-color-800);
+  --pf-pill-solid-soft-close-hover: var(--pf-gray-color-550);
+  --pf-pill-solid-soft-close-hover-bg: var(--pf-opacity-white-200);
 }
 
-.color-neutral {
-  color: var(--pf-semantic-utility-neutral-default);
+:root [data-theme=dark] {
+  --pf-pill-outline-red-bg: var(--pf-red-color-700);
+  --pf-pill-outline-red-text: var(--pf-red-color-300);
+  --pf-pill-outline-red-border: var(--pf-red-color-500);
+  --pf-pill-outline-red-dot: var(--pf-red-color-400);
+  --pf-pill-outline-red-icon: var(--pf-red-color-300);
+  --pf-pill-outline-red-close: var(--pf-red-color-500);
+  --pf-pill-outline-red-close-hover: var(--pf-red-color-450);
+  --pf-pill-outline-red-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-purple-bg: var(--pf-purple-color-700);
+  --pf-pill-outline-purple-text: var(--pf-purple-color-300);
+  --pf-pill-outline-purple-border: var(--pf-purple-color-450);
+  --pf-pill-outline-purple-dot: var(--pf-purple-color-400);
+  --pf-pill-outline-purple-icon: var(--pf-purple-color-300);
+  --pf-pill-outline-purple-close: var(--pf-purple-color-450);
+  --pf-pill-outline-purple-close-hover: var(--pf-purple-color-400);
+  --pf-pill-outline-purple-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-yellow-bg: var(--pf-yellow-color-800);
+  --pf-pill-outline-yellow-text: var(--pf-yellow-color-300);
+  --pf-pill-outline-yellow-border: var(--pf-yellow-color-500);
+  --pf-pill-outline-yellow-dot: var(--pf-yellow-color-400);
+  --pf-pill-outline-yellow-icon: var(--pf-yellow-color-300);
+  --pf-pill-outline-yellow-close: var(--pf-yellow-color-500);
+  --pf-pill-outline-yellow-close-hover: var(--pf-yellow-color-450);
+  --pf-pill-outline-yellow-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-blue-bg: var(--pf-blue-color-700);
+  --pf-pill-outline-blue-text: var(--pf-blue-color-250);
+  --pf-pill-outline-blue-border: var(--pf-blue-color-500);
+  --pf-pill-outline-blue-dot: var(--pf-blue-color-400);
+  --pf-pill-outline-blue-icon: var(--pf-blue-color-250);
+  --pf-pill-outline-blue-close: var(--pf-blue-color-500);
+  --pf-pill-outline-blue-close-hover: var(--pf-blue-color-450);
+  --pf-pill-outline-blue-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-green-bg: var(--pf-green-color-800);
+  --pf-pill-outline-green-text: var(--pf-green-color-300);
+  --pf-pill-outline-green-border: var(--pf-green-color-600);
+  --pf-pill-outline-green-dot: var(--pf-green-color-450);
+  --pf-pill-outline-green-icon: var(--pf-green-color-300);
+  --pf-pill-outline-green-close: var(--pf-green-color-600);
+  --pf-pill-outline-green-close-hover: var(--pf-green-color-500);
+  --pf-pill-outline-green-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-gray-bg: var(--pf-gray-color-800);
+  --pf-pill-outline-gray-text: var(--pf-gray-color-250);
+  --pf-pill-outline-gray-border: var(--pf-gray-color-550);
+  --pf-pill-outline-gray-dot: var(--pf-gray-color-400);
+  --pf-pill-outline-gray-icon: var(--pf-gray-color-250);
+  --pf-pill-outline-gray-close: var(--pf-gray-color-550);
+  --pf-pill-outline-gray-close-hover: var(--pf-gray-color-500);
+  --pf-pill-outline-gray-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-pink-bg: var(--pf-pink-color-800);
+  --pf-pill-outline-pink-text: var(--pf-pink-color-300);
+  --pf-pill-outline-pink-border: var(--pf-pink-color-500);
+  --pf-pill-outline-pink-dot: var(--pf-pink-color-400);
+  --pf-pill-outline-pink-icon: var(--pf-pink-color-300);
+  --pf-pill-outline-pink-close: var(--pf-pink-color-600);
+  --pf-pill-outline-pink-close-hover: var(--pf-pink-color-500);
+  --pf-pill-outline-pink-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-orange-bg: var(--pf-orange-color-700);
+  --pf-pill-outline-orange-text: var(--pf-orange-color-300);
+  --pf-pill-outline-orange-border: var(--pf-orange-color-500);
+  --pf-pill-outline-orange-dot: var(--pf-orange-color-400);
+  --pf-pill-outline-orange-icon: var(--pf-orange-color-300);
+  --pf-pill-outline-orange-close: var(--pf-orange-color-500);
+  --pf-pill-outline-orange-close-hover: var(--pf-orange-color-450);
+  --pf-pill-outline-orange-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-teal-bg: var(--pf-teal-color-700);
+  --pf-pill-outline-teal-text: var(--pf-teal-color-250);
+  --pf-pill-outline-teal-border: var(--pf-teal-color-550);
+  --pf-pill-outline-teal-dot: var(--pf-teal-color-450);
+  --pf-pill-outline-teal-icon: var(--pf-teal-color-250);
+  --pf-pill-outline-teal-close: var(--pf-teal-color-550);
+  --pf-pill-outline-teal-close-hover: var(--pf-teal-color-500);
+  --pf-pill-outline-teal-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-outline-soft-bg: var(--pf-gray-color-800);
+  --pf-pill-outline-soft-text: var(--pf-gray-color-300);
+  --pf-pill-outline-soft-border: var(--pf-gray-color-600);
+  --pf-pill-outline-soft-dot: var(--pf-gray-color-450);
+  --pf-pill-outline-soft-icon: var(--pf-gray-color-350);
+  --pf-pill-outline-soft-close: var(--pf-gray-color-500);
+  --pf-pill-outline-soft-close-hover: var(--pf-gray-color-400);
+  --pf-pill-outline-soft-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-red-bg: var(--pf-red-color-450);
+  --pf-pill-solid-red-text: var(--pf-red-color-50);
+  --pf-pill-solid-red-dot: var(--pf-red-color-250);
+  --pf-pill-solid-red-icon: var(--pf-red-color-50);
+  --pf-pill-solid-red-close: var(--pf-red-color-300);
+  --pf-pill-solid-red-close-hover: var(--pf-red-color-300);
+  --pf-pill-solid-red-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-purple-bg: var(--pf-purple-color-450);
+  --pf-pill-solid-purple-text: var(--pf-purple-color-100);
+  --pf-pill-solid-purple-dot: var(--pf-purple-color-300);
+  --pf-pill-solid-purple-icon: var(--pf-purple-color-100);
+  --pf-pill-solid-purple-close: var(--pf-purple-color-300);
+  --pf-pill-solid-purple-close-hover: var(--pf-purple-color-300);
+  --pf-pill-solid-purple-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-yellow-bg: var(--pf-yellow-color-550);
+  --pf-pill-solid-yellow-text: var(--pf-gray-color-50);
+  --pf-pill-solid-yellow-dot: var(--pf-yellow-color-300);
+  --pf-pill-solid-yellow-icon: var(--pf-yellow-color-50);
+  --pf-pill-solid-yellow-close: var(--pf-yellow-color-400);
+  --pf-pill-solid-yellow-close-hover: var(--pf-yellow-color-450);
+  --pf-pill-solid-yellow-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-blue-bg: var(--pf-secondary-color-500);
+  --pf-pill-solid-blue-text: var(--pf-secondary-color-50);
+  --pf-pill-solid-blue-dot: var(--pf-secondary-color-300);
+  --pf-pill-solid-blue-icon: var(--pf-secondary-color-50);
+  --pf-pill-solid-blue-close: var(--pf-secondary-color-300);
+  --pf-pill-solid-blue-close-hover: var(--pf-secondary-color-400);
+  --pf-pill-solid-blue-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-green-bg: var(--pf-green-color-600);
+  --pf-pill-solid-green-text: var(--pf-green-color-100);
+  --pf-pill-solid-green-dot: var(--pf-green-color-450);
+  --pf-pill-solid-green-icon: var(--pf-green-color-100);
+  --pf-pill-solid-green-close: var(--pf-green-color-300);
+  --pf-pill-solid-green-close-hover: var(--pf-green-color-400);
+  --pf-pill-solid-green-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-gray-bg: var(--pf-gray-color-700);
+  --pf-pill-solid-gray-text: var(--pf-gray-color-50);
+  --pf-pill-solid-gray-dot: var(--pf-gray-color-400);
+  --pf-pill-solid-gray-icon: var(--pf-gray-color-50);
+  --pf-pill-solid-gray-close: var(--pf-gray-color-500);
+  --pf-pill-solid-gray-close-hover: var(--pf-gray-color-550);
+  --pf-pill-solid-gray-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-pink-bg: var(--pf-pink-color-450);
+  --pf-pill-solid-pink-text: var(--pf-pink-color-150);
+  --pf-pill-solid-pink-dot: var(--pf-pink-color-300);
+  --pf-pill-solid-pink-icon: var(--pf-pink-color-150);
+  --pf-pill-solid-pink-close: var(--pf-pink-color-300);
+  --pf-pill-solid-pink-close-hover: var(--pf-pink-color-300);
+  --pf-pill-solid-pink-close-hover-bg: var(--pf-opacity-black-300);
+  --pf-pill-solid-orange-bg: var(--pf-orange-color-450);
+  --pf-pill-solid-orange-text: var(--pf-orange-color-50);
+  --pf-pill-solid-orange-dot: var(--pf-orange-color-300);
+  --pf-pill-solid-orange-icon: var(--pf-orange-color-50);
+  --pf-pill-solid-orange-close: var(--pf-orange-color-300);
+  --pf-pill-solid-orange-close-hover: var(--pf-orange-color-300);
+  --pf-pill-solid-orange-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-teal-bg: var(--pf-teal-color-550);
+  --pf-pill-solid-teal-text: var(--pf-teal-color-100);
+  --pf-pill-solid-teal-dot: var(--pf-teal-color-300);
+  --pf-pill-solid-teal-icon: var(--pf-teal-color-100);
+  --pf-pill-solid-teal-close: var(--pf-teal-color-400);
+  --pf-pill-solid-teal-close-hover: var(--pf-teal-color-450);
+  --pf-pill-solid-teal-close-hover-bg: var(--pf-opacity-black-250);
+  --pf-pill-solid-soft-bg: var(--pf-gray-color-700);
+  --pf-pill-solid-soft-text: var(--pf-gray-color-200);
+  --pf-pill-solid-soft-dot: var(--pf-gray-color-450);
+  --pf-pill-solid-soft-icon: var(--pf-gray-color-250);
+  --pf-pill-solid-soft-close: var(--pf-gray-color-450);
+  --pf-pill-solid-soft-close-hover: var(--pf-gray-color-400);
+  --pf-pill-solid-soft-close-hover-bg: var(--pf-opacity-black-250);
 }
 
-.bg-neutral {
-  background-color: var(--pf-semantic-utility-neutral-default);
+.pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border: none;
+  font-family: var(--pf-font-family);
 }
-
-.color-warning {
-  color: var(--pf-semantic-utility-warning-default);
+.pill--badge {
+  border-radius: var(--pf-border-radius-sm);
 }
-
-.bg-warning {
-  background-color: var(--pf-semantic-utility-warning-default);
+.pill--pill {
+  border-radius: var(--pf-border-radius-full);
 }
-
-.color-error {
-  color: var(--pf-semantic-utility-error-default);
+.pill--sm {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
+  font-size: var(--pf-font-size-sm);
+  font-weight: var(--pf-font-weight-semibold);
+  line-height: 16px;
+  gap: var(--pf-spacing-xxs);
 }
-
-.bg-error {
-  background-color: var(--pf-semantic-utility-error-default);
+.pill--md {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-md);
+  font-size: var(--pf-font-size-md);
+  font-weight: var(--pf-font-weight-medium);
+  line-height: 20px;
+  gap: var(--pf-spacing-xs);
 }
-
-.color-brand {
-  color: var(--pf-semantic-utility-brand-default);
+.pill--lg {
+  padding: var(--pf-spacing-xs) var(--pf-spacing-lg);
+  font-size: var(--pf-font-size-md);
+  font-weight: var(--pf-font-weight-medium);
+  line-height: 20px;
+  gap: var(--pf-spacing-xs);
 }
-
-.bg-brand {
-  background-color: var(--pf-semantic-utility-brand-default);
+.pill--lg.pill--badge {
+  border-radius: var(--pf-border-radius-md);
 }
-
-.color-pending {
-  color: var(--pf-semantic-utility-pending-default);
+.pill--icon-only.pill--sm {
+  padding: var(--pf-spacing-xxs);
 }
-
-.bg-pending {
-  background-color: var(--pf-semantic-utility-pending-default);
+.pill--icon-only.pill--md {
+  padding: var(--pf-spacing-xs);
 }
-
-.color-orange {
-  color: var(--pf-semantic-utility-orange-default);
+.pill--icon-only.pill--lg {
+  padding: var(--pf-spacing-sm);
 }
-
-.bg-orange {
-  background-color: var(--pf-semantic-utility-orange-default);
+.pill--closeable.pill--sm {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-sm);
 }
-
-.color-purple {
-  color: var(--pf-semantic-utility-purple-default);
+.pill--closeable.pill--md {
+  padding: var(--pf-spacing-xxs) var(--pf-spacing-xs) var(--pf-spacing-xxs) var(--pf-spacing-md);
+  gap: var(--pf-spacing-xxs);
 }
-
-.bg-purple {
-  background-color: var(--pf-semantic-utility-purple-default);
+.pill--closeable.pill--lg {
+  padding: var(--pf-spacing-xs) var(--pf-spacing-sm) var(--pf-spacing-xs) var(--pf-spacing-lg);
+  gap: var(--pf-spacing-xxs);
 }
-
-.color-teal {
-  color: var(--pf-semantic-utility-teal-default);
+.pill--solid-red {
+  background-color: var(--pf-pill-solid-red-bg);
+  color: var(--pf-pill-solid-red-text);
 }
-
-.bg-teal {
-  background-color: var(--pf-semantic-utility-teal-default);
+.pill--solid-red > .icon {
+  color: var(--pf-pill-solid-red-icon);
 }
-
-.bg-white-50 {
-  background-color: var(--pf-opacity-white-50);
+.pill--solid-red .pill__dot {
+  background-color: var(--pf-pill-solid-red-dot);
 }
-
-.bg-white-100 {
-  background-color: var(--pf-opacity-white-100);
+.pill--solid-red .pill__close {
+  color: var(--pf-pill-solid-red-close);
 }
-
-.bg-white-150 {
-  background-color: var(--pf-opacity-white-150);
+.pill--solid-red .pill__close:hover {
+  color: var(--pf-pill-solid-red-close-hover);
+  background-color: var(--pf-pill-solid-red-close-hover-bg);
 }
-
-.bg-white-200 {
-  background-color: var(--pf-opacity-white-200);
+.pill--solid-purple {
+  background-color: var(--pf-pill-solid-purple-bg);
+  color: var(--pf-pill-solid-purple-text);
 }
-
-.bg-white-250 {
-  background-color: var(--pf-opacity-white-250);
+.pill--solid-purple > .icon {
+  color: var(--pf-pill-solid-purple-icon);
 }
-
-.bg-white-300 {
-  background-color: var(--pf-opacity-white-300);
+.pill--solid-purple .pill__dot {
+  background-color: var(--pf-pill-solid-purple-dot);
 }
-
-.bg-white-350 {
-  background-color: var(--pf-opacity-white-350);
+.pill--solid-purple .pill__close {
+  color: var(--pf-pill-solid-purple-close);
 }
-
-.bg-white-400 {
-  background-color: var(--pf-opacity-white-400);
+.pill--solid-purple .pill__close:hover {
+  color: var(--pf-pill-solid-purple-close-hover);
+  background-color: var(--pf-pill-solid-purple-close-hover-bg);
 }
-
-.bg-white-450 {
-  background-color: var(--pf-opacity-white-450);
+.pill--solid-yellow {
+  background-color: var(--pf-pill-solid-yellow-bg);
+  color: var(--pf-pill-solid-yellow-text);
 }
-
-.bg-white-500 {
-  background-color: var(--pf-opacity-white-500);
+.pill--solid-yellow > .icon {
+  color: var(--pf-pill-solid-yellow-icon);
 }
-
-.bg-white-550 {
-  background-color: var(--pf-opacity-white-550);
+.pill--solid-yellow .pill__dot {
+  background-color: var(--pf-pill-solid-yellow-dot);
 }
-
-.bg-white-600 {
-  background-color: var(--pf-opacity-white-600);
+.pill--solid-yellow .pill__close {
+  color: var(--pf-pill-solid-yellow-close);
 }
-
-.bg-white-650 {
-  background-color: var(--pf-opacity-white-650);
+.pill--solid-yellow .pill__close:hover {
+  color: var(--pf-pill-solid-yellow-close-hover);
+  background-color: var(--pf-pill-solid-yellow-close-hover-bg);
 }
-
-.bg-white-700 {
-  background-color: var(--pf-opacity-white-700);
+.pill--solid-blue {
+  background-color: var(--pf-pill-solid-blue-bg);
+  color: var(--pf-pill-solid-blue-text);
 }
-
-.bg-white-750 {
-  background-color: var(--pf-opacity-white-750);
+.pill--solid-blue > .icon {
+  color: var(--pf-pill-solid-blue-icon);
 }
-
-.bg-white-800 {
-  background-color: var(--pf-opacity-white-800);
+.pill--solid-blue .pill__dot {
+  background-color: var(--pf-pill-solid-blue-dot);
 }
-
-.bg-white-850 {
-  background-color: var(--pf-opacity-white-850);
+.pill--solid-blue .pill__close {
+  color: var(--pf-pill-solid-blue-close);
 }
-
-.bg-white-900 {
-  background-color: var(--pf-opacity-white-900);
+.pill--solid-blue .pill__close:hover {
+  color: var(--pf-pill-solid-blue-close-hover);
+  background-color: var(--pf-pill-solid-blue-close-hover-bg);
 }
-
-.bg-white-950 {
-  background-color: var(--pf-opacity-white-950);
+.pill--solid-green {
+  background-color: var(--pf-pill-solid-green-bg);
+  color: var(--pf-pill-solid-green-text);
 }
-
-.bg-white-1000 {
-  background-color: var(--pf-opacity-white-1000);
+.pill--solid-green > .icon {
+  color: var(--pf-pill-solid-green-icon);
 }
-
-.bg-black-50 {
-  background-color: var(--pf-opacity-black-50);
+.pill--solid-green .pill__dot {
+  background-color: var(--pf-pill-solid-green-dot);
 }
-
-.bg-black-100 {
-  background-color: var(--pf-opacity-black-100);
+.pill--solid-green .pill__close {
+  color: var(--pf-pill-solid-green-close);
 }
-
-.bg-black-150 {
-  background-color: var(--pf-opacity-black-150);
+.pill--solid-green .pill__close:hover {
+  color: var(--pf-pill-solid-green-close-hover);
+  background-color: var(--pf-pill-solid-green-close-hover-bg);
 }
-
-.bg-black-200 {
-  background-color: var(--pf-opacity-black-200);
+.pill--solid-gray {
+  background-color: var(--pf-pill-solid-gray-bg);
+  color: var(--pf-pill-solid-gray-text);
 }
-
-.bg-black-250 {
-  background-color: var(--pf-opacity-black-250);
+.pill--solid-gray > .icon {
+  color: var(--pf-pill-solid-gray-icon);
 }
-
-.bg-black-300 {
-  background-color: var(--pf-opacity-black-300);
+.pill--solid-gray .pill__dot {
+  background-color: var(--pf-pill-solid-gray-dot);
 }
-
-.bg-black-350 {
-  background-color: var(--pf-opacity-black-350);
+.pill--solid-gray .pill__close {
+  color: var(--pf-pill-solid-gray-close);
 }
-
-.bg-black-400 {
-  background-color: var(--pf-opacity-black-400);
+.pill--solid-gray .pill__close:hover {
+  color: var(--pf-pill-solid-gray-close-hover);
+  background-color: var(--pf-pill-solid-gray-close-hover-bg);
 }
-
-.bg-black-450 {
-  background-color: var(--pf-opacity-black-450);
+.pill--solid-pink {
+  background-color: var(--pf-pill-solid-pink-bg);
+  color: var(--pf-pill-solid-pink-text);
 }
-
-.bg-black-500 {
-  background-color: var(--pf-opacity-black-500);
+.pill--solid-pink > .icon {
+  color: var(--pf-pill-solid-pink-icon);
 }
-
-.bg-black-550 {
-  background-color: var(--pf-opacity-black-550);
+.pill--solid-pink .pill__dot {
+  background-color: var(--pf-pill-solid-pink-dot);
 }
-
-.bg-black-600 {
-  background-color: var(--pf-opacity-black-600);
+.pill--solid-pink .pill__close {
+  color: var(--pf-pill-solid-pink-close);
 }
-
-.bg-black-650 {
-  background-color: var(--pf-opacity-black-650);
+.pill--solid-pink .pill__close:hover {
+  color: var(--pf-pill-solid-pink-close-hover);
+  background-color: var(--pf-pill-solid-pink-close-hover-bg);
 }
-
-.bg-black-700 {
-  background-color: var(--pf-opacity-black-700);
+.pill--solid-orange {
+  background-color: var(--pf-pill-solid-orange-bg);
+  color: var(--pf-pill-solid-orange-text);
 }
-
-.bg-black-750 {
-  background-color: var(--pf-opacity-black-750);
+.pill--solid-orange > .icon {
+  color: var(--pf-pill-solid-orange-icon);
 }
-
-.bg-black-800 {
-  background-color: var(--pf-opacity-black-800);
+.pill--solid-orange .pill__dot {
+  background-color: var(--pf-pill-solid-orange-dot);
 }
-
-.bg-black-850 {
-  background-color: var(--pf-opacity-black-850);
+.pill--solid-orange .pill__close {
+  color: var(--pf-pill-solid-orange-close);
 }
-
-.bg-black-900 {
-  background-color: var(--pf-opacity-black-900);
+.pill--solid-orange .pill__close:hover {
+  color: var(--pf-pill-solid-orange-close-hover);
+  background-color: var(--pf-pill-solid-orange-close-hover-bg);
 }
-
-.bg-black-950 {
-  background-color: var(--pf-opacity-black-950);
+.pill--solid-teal {
+  background-color: var(--pf-pill-solid-teal-bg);
+  color: var(--pf-pill-solid-teal-text);
 }
-
-.bg-black-1000 {
-  background-color: var(--pf-opacity-black-1000);
+.pill--solid-teal > .icon {
+  color: var(--pf-pill-solid-teal-icon);
 }
-
-.link-color {
-  color: var(--pf-semantic-font-link);
+.pill--solid-teal .pill__dot {
+  background-color: var(--pf-pill-solid-teal-dot);
 }
-
-.active-link-color {
-  color: var(--pf-semantic-font-link);
+.pill--solid-teal .pill__close {
+  color: var(--pf-pill-solid-teal-close);
 }
-
-.pill {
-  display: inline-block;
-  border-radius: var(--pf-border-radius-xs);
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
-  font-size: var(--pf-font-size-overline);
-  font-weight: var(--pf-font-weight-medium);
-  white-space: nowrap;
-  line-height: 1;
-  color: var(--pf-gray-color-50);
+.pill--solid-teal .pill__close:hover {
+  color: var(--pf-pill-solid-teal-close-hover);
+  background-color: var(--pf-pill-solid-teal-close-hover-bg);
 }
-.pill--sm {
-  padding: var(--pf-spacing-xxs) var(--pf-spacing-sm);
-  font-size: var(--pf-font-size-overline);
+.pill--solid-soft {
+  background-color: var(--pf-pill-solid-soft-bg);
+  color: var(--pf-pill-solid-soft-text);
 }
-.pill--md {
-  padding: var(--pf-spacing-sm) var(--pf-spacing-lg);
-  font-size: var(--pf-font-size-body);
+.pill--solid-soft > .icon {
+  color: var(--pf-pill-solid-soft-icon);
 }
-.pill--lg {
-  padding: var(--pf-spacing-lg) var(--pf-spacing-2xl);
-  font-size: var(--pf-font-size-h2);
+.pill--solid-soft .pill__dot {
+  background-color: var(--pf-pill-solid-soft-dot);
 }
-.pill--blue {
-  background-color: var(--pf-item-blue-color);
-  border-color: var(--pf-item-blue-color);
+.pill--solid-soft .pill__close {
+  color: var(--pf-pill-solid-soft-close);
 }
-.pill--blue-1 {
-  background-color: var(--pf-item-blue-1-color);
-  border-color: var(--pf-item-blue-1-color);
+.pill--solid-soft .pill__close:hover {
+  color: var(--pf-pill-solid-soft-close-hover);
+  background-color: var(--pf-pill-solid-soft-close-hover-bg);
 }
-.pill--blue-2 {
-  background-color: var(--pf-item-blue-2-color);
-  border-color: var(--pf-item-blue-2-color);
+.pill--outline-red {
+  background-color: var(--pf-pill-outline-red-bg);
+  color: var(--pf-pill-outline-red-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-red-border);
 }
-.pill--blue-3 {
-  background-color: var(--pf-item-blue-3-color);
-  border-color: var(--pf-item-blue-3-color);
+.pill--outline-red > .icon {
+  color: var(--pf-pill-outline-red-icon);
 }
-.pill--blue-4 {
-  background-color: var(--pf-item-blue-4-color);
-  border-color: var(--pf-item-blue-4-color);
+.pill--outline-red .pill__dot {
+  background-color: var(--pf-pill-outline-red-dot);
 }
-.pill--blue-5 {
-  background-color: var(--pf-item-blue-5-color);
-  border-color: var(--pf-item-blue-5-color);
+.pill--outline-red .pill__close {
+  color: var(--pf-pill-outline-red-close);
 }
-.pill--purple {
-  background-color: var(--pf-item-purple-color);
-  border-color: var(--pf-item-purple-color);
+.pill--outline-red .pill__close:hover {
+  color: var(--pf-pill-outline-red-close-hover);
+  background-color: var(--pf-pill-outline-red-close-hover-bg);
 }
-.pill--purple-1 {
-  background-color: var(--pf-item-purple-1-color);
-  border-color: var(--pf-item-purple-1-color);
+.pill--outline-purple {
+  background-color: var(--pf-pill-outline-purple-bg);
+  color: var(--pf-pill-outline-purple-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-purple-border);
 }
-.pill--purple-2 {
-  background-color: var(--pf-item-purple-2-color);
-  border-color: var(--pf-item-purple-2-color);
+.pill--outline-purple > .icon {
+  color: var(--pf-pill-outline-purple-icon);
 }
-.pill--purple-3 {
-  background-color: var(--pf-item-purple-3-color);
-  border-color: var(--pf-item-purple-3-color);
+.pill--outline-purple .pill__dot {
+  background-color: var(--pf-pill-outline-purple-dot);
 }
-.pill--purple-4 {
-  background-color: var(--pf-item-purple-4-color);
-  border-color: var(--pf-item-purple-4-color);
+.pill--outline-purple .pill__close {
+  color: var(--pf-pill-outline-purple-close);
 }
-.pill--purple-5 {
-  background-color: var(--pf-item-purple-5-color);
-  border-color: var(--pf-item-purple-5-color);
+.pill--outline-purple .pill__close:hover {
+  color: var(--pf-pill-outline-purple-close-hover);
+  background-color: var(--pf-pill-outline-purple-close-hover-bg);
 }
-.pill--red {
-  background-color: var(--pf-item-red-color);
-  border-color: var(--pf-item-red-color);
+.pill--outline-yellow {
+  background-color: var(--pf-pill-outline-yellow-bg);
+  color: var(--pf-pill-outline-yellow-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-yellow-border);
 }
-.pill--red-1 {
-  background-color: var(--pf-item-red-1-color);
-  border-color: var(--pf-item-red-1-color);
+.pill--outline-yellow > .icon {
+  color: var(--pf-pill-outline-yellow-icon);
 }
-.pill--red-2 {
-  background-color: var(--pf-item-red-2-color);
-  border-color: var(--pf-item-red-2-color);
+.pill--outline-yellow .pill__dot {
+  background-color: var(--pf-pill-outline-yellow-dot);
 }
-.pill--red-3 {
-  background-color: var(--pf-item-red-3-color);
-  border-color: var(--pf-item-red-3-color);
+.pill--outline-yellow .pill__close {
+  color: var(--pf-pill-outline-yellow-close);
 }
-.pill--red-4 {
-  background-color: var(--pf-item-red-4-color);
-  border-color: var(--pf-item-red-4-color);
+.pill--outline-yellow .pill__close:hover {
+  color: var(--pf-pill-outline-yellow-close-hover);
+  background-color: var(--pf-pill-outline-yellow-close-hover-bg);
 }
-.pill--red-5 {
-  background-color: var(--pf-item-red-5-color);
-  border-color: var(--pf-item-red-5-color);
+.pill--outline-blue {
+  background-color: var(--pf-pill-outline-blue-bg);
+  color: var(--pf-pill-outline-blue-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-blue-border);
 }
-.pill--yellow {
-  background-color: var(--pf-item-yellow-color);
-  border-color: var(--pf-item-yellow-color);
+.pill--outline-blue > .icon {
+  color: var(--pf-pill-outline-blue-icon);
 }
-.pill--yellow-1 {
-  background-color: var(--pf-item-yellow-1-color);
-  border-color: var(--pf-item-yellow-1-color);
+.pill--outline-blue .pill__dot {
+  background-color: var(--pf-pill-outline-blue-dot);
 }
-.pill--yellow-2 {
-  background-color: var(--pf-item-yellow-2-color);
-  border-color: var(--pf-item-yellow-2-color);
+.pill--outline-blue .pill__close {
+  color: var(--pf-pill-outline-blue-close);
 }
-.pill--yellow-3 {
-  background-color: var(--pf-item-yellow-3-color);
-  border-color: var(--pf-item-yellow-3-color);
+.pill--outline-blue .pill__close:hover {
+  color: var(--pf-pill-outline-blue-close-hover);
+  background-color: var(--pf-pill-outline-blue-close-hover-bg);
 }
-.pill--yellow-4 {
-  background-color: var(--pf-item-yellow-4-color);
-  border-color: var(--pf-item-yellow-4-color);
+.pill--outline-green {
+  background-color: var(--pf-pill-outline-green-bg);
+  color: var(--pf-pill-outline-green-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-green-border);
 }
-.pill--yellow-5 {
-  background-color: var(--pf-item-yellow-5-color);
-  border-color: var(--pf-item-yellow-5-color);
+.pill--outline-green > .icon {
+  color: var(--pf-pill-outline-green-icon);
 }
-.pill--gray {
-  background-color: var(--pf-item-gray-color);
-  border-color: var(--pf-item-gray-color);
+.pill--outline-green .pill__dot {
+  background-color: var(--pf-pill-outline-green-dot);
 }
-.pill--gray-1 {
-  background-color: var(--pf-item-gray-1-color);
-  border-color: var(--pf-item-gray-1-color);
+.pill--outline-green .pill__close {
+  color: var(--pf-pill-outline-green-close);
 }
-.pill--gray-2 {
-  background-color: var(--pf-item-gray-2-color);
-  border-color: var(--pf-item-gray-2-color);
+.pill--outline-green .pill__close:hover {
+  color: var(--pf-pill-outline-green-close-hover);
+  background-color: var(--pf-pill-outline-green-close-hover-bg);
 }
-.pill--gray-3 {
-  background-color: var(--pf-item-gray-3-color);
-  border-color: var(--pf-item-gray-3-color);
+.pill--outline-gray {
+  background-color: var(--pf-pill-outline-gray-bg);
+  color: var(--pf-pill-outline-gray-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-gray-border);
 }
-.pill--gray-4 {
-  background-color: var(--pf-item-gray-4-color);
-  border-color: var(--pf-item-gray-4-color);
+.pill--outline-gray > .icon {
+  color: var(--pf-pill-outline-gray-icon);
 }
-.pill--gray-5 {
-  background-color: var(--pf-item-gray-5-color);
-  border-color: var(--pf-item-gray-5-color);
+.pill--outline-gray .pill__dot {
+  background-color: var(--pf-pill-outline-gray-dot);
 }
-.pill--green {
-  background-color: var(--pf-item-green-color);
-  border-color: var(--pf-item-green-color);
+.pill--outline-gray .pill__close {
+  color: var(--pf-pill-outline-gray-close);
 }
-.pill--green-1 {
-  background-color: var(--pf-item-green-1-color);
-  border-color: var(--pf-item-green-1-color);
+.pill--outline-gray .pill__close:hover {
+  color: var(--pf-pill-outline-gray-close-hover);
+  background-color: var(--pf-pill-outline-gray-close-hover-bg);
 }
-.pill--green-2 {
-  background-color: var(--pf-item-green-2-color);
-  border-color: var(--pf-item-green-2-color);
+.pill--outline-pink {
+  background-color: var(--pf-pill-outline-pink-bg);
+  color: var(--pf-pill-outline-pink-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-pink-border);
 }
-.pill--green-3 {
-  background-color: var(--pf-item-green-3-color);
-  border-color: var(--pf-item-green-3-color);
+.pill--outline-pink > .icon {
+  color: var(--pf-pill-outline-pink-icon);
 }
-.pill--green-4 {
-  background-color: var(--pf-item-green-4-color);
-  border-color: var(--pf-item-green-4-color);
+.pill--outline-pink .pill__dot {
+  background-color: var(--pf-pill-outline-pink-dot);
 }
-.pill--green-5 {
-  background-color: var(--pf-item-green-5-color);
-  border-color: var(--pf-item-green-5-color);
+.pill--outline-pink .pill__close {
+  color: var(--pf-pill-outline-pink-close);
 }
-.pill--pink {
-  background-color: var(--pf-item-pink-color);
-  border-color: var(--pf-item-pink-color);
+.pill--outline-pink .pill__close:hover {
+  color: var(--pf-pill-outline-pink-close-hover);
+  background-color: var(--pf-pill-outline-pink-close-hover-bg);
 }
-.pill--pink-1 {
-  background-color: var(--pf-item-pink-1-color);
-  border-color: var(--pf-item-pink-1-color);
+.pill--outline-orange {
+  background-color: var(--pf-pill-outline-orange-bg);
+  color: var(--pf-pill-outline-orange-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-orange-border);
 }
-.pill--pink-2 {
-  background-color: var(--pf-item-pink-2-color);
-  border-color: var(--pf-item-pink-2-color);
+.pill--outline-orange > .icon {
+  color: var(--pf-pill-outline-orange-icon);
 }
-.pill--pink-3 {
-  background-color: var(--pf-item-pink-3-color);
-  border-color: var(--pf-item-pink-3-color);
+.pill--outline-orange .pill__dot {
+  background-color: var(--pf-pill-outline-orange-dot);
 }
-.pill--pink-4 {
-  background-color: var(--pf-item-pink-4-color);
-  border-color: var(--pf-item-pink-4-color);
+.pill--outline-orange .pill__close {
+  color: var(--pf-pill-outline-orange-close);
 }
-.pill--pink-5 {
-  background-color: var(--pf-item-pink-5-color);
-  border-color: var(--pf-item-pink-5-color);
+.pill--outline-orange .pill__close:hover {
+  color: var(--pf-pill-outline-orange-close-hover);
+  background-color: var(--pf-pill-outline-orange-close-hover-bg);
 }
-.pill--orange {
-  background-color: var(--pf-item-orange-color);
-  border-color: var(--pf-item-orange-color);
+.pill--outline-teal {
+  background-color: var(--pf-pill-outline-teal-bg);
+  color: var(--pf-pill-outline-teal-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-teal-border);
 }
-.pill--orange-1 {
-  background-color: var(--pf-item-orange-1-color);
-  border-color: var(--pf-item-orange-1-color);
+.pill--outline-teal > .icon {
+  color: var(--pf-pill-outline-teal-icon);
 }
-.pill--orange-2 {
-  background-color: var(--pf-item-orange-2-color);
-  border-color: var(--pf-item-orange-2-color);
+.pill--outline-teal .pill__dot {
+  background-color: var(--pf-pill-outline-teal-dot);
 }
-.pill--orange-3 {
-  background-color: var(--pf-item-orange-3-color);
-  border-color: var(--pf-item-orange-3-color);
+.pill--outline-teal .pill__close {
+  color: var(--pf-pill-outline-teal-close);
 }
-.pill--orange-4 {
-  background-color: var(--pf-item-orange-4-color);
-  border-color: var(--pf-item-orange-4-color);
+.pill--outline-teal .pill__close:hover {
+  color: var(--pf-pill-outline-teal-close-hover);
+  background-color: var(--pf-pill-outline-teal-close-hover-bg);
 }
-.pill--orange-5 {
-  background-color: var(--pf-item-orange-5-color);
-  border-color: var(--pf-item-orange-5-color);
+.pill--outline-soft {
+  background-color: var(--pf-pill-outline-soft-bg);
+  color: var(--pf-pill-outline-soft-text);
+  box-shadow: inset 0 0 0 1px var(--pf-pill-outline-soft-border);
 }
-.pill--teal {
-  background-color: var(--pf-item-teal-color);
-  border-color: var(--pf-item-teal-color);
+.pill--outline-soft > .icon {
+  color: var(--pf-pill-outline-soft-icon);
 }
-.pill--teal-1 {
-  background-color: var(--pf-item-teal-1-color);
-  border-color: var(--pf-item-teal-1-color);
+.pill--outline-soft .pill__dot {
+  background-color: var(--pf-pill-outline-soft-dot);
 }
-.pill--teal-2 {
-  background-color: var(--pf-item-teal-2-color);
-  border-color: var(--pf-item-teal-2-color);
+.pill--outline-soft .pill__close {
+  color: var(--pf-pill-outline-soft-close);
 }
-.pill--teal-3 {
-  background-color: var(--pf-item-teal-3-color);
-  border-color: var(--pf-item-teal-3-color);
+.pill--outline-soft .pill__close:hover {
+  color: var(--pf-pill-outline-soft-close-hover);
+  background-color: var(--pf-pill-outline-soft-close-hover-bg);
 }
-.pill--teal-4 {
-  background-color: var(--pf-item-teal-4-color);
-  border-color: var(--pf-item-teal-4-color);
+.pill__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }
-.pill--teal-5 {
-  background-color: var(--pf-item-teal-5-color);
-  border-color: var(--pf-item-teal-5-color);
+.pill__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: var(--pf-spacing-micro);
+  border-radius: var(--pf-border-radius-xs);
+  line-height: 1;
+  aspect-ratio: 1;
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 @keyframes moveBg {