Add deprecated pill to deprecated firewall config item (#318)

Author: jasikpark

docs/config/firewall.mdx

@@ -140,6 +140,8 @@ enabling the built-in Nebula SSH server, you may wish to grant access over the N
 ## firewall.default_local_cidr_any
 
 <Pill className="mb-24">Default: False</Pill> <Pill className="mb-24">Reloadable</Pill>
+{/** children passed as prop to avoid MDX generating a paragraph inside Pill */}
+<Pill className="mb-24" variant="warning" children="Deprecated" />
 
 This setting was introduced in Nebula v1.9.0 set to `true` for backwards compatibility purposes. The default was changed
 to `false` in Nebula v1.10.0 and the config option is now deprecated.

src/components/Pill/Pill.module.css

@@ -5,15 +5,20 @@
   font-weight: 600;
   line-height: 1;
   border-radius: 10rem;
-  background-color: var(--ifm-color-emphasis-200);
   padding: 4px 8px;
 
   &:global(.no-transform),
-  & :global(.no-transform) {
+  &:global(.no-transform) {
     text-transform: none;
   }
 }
 
 .Pill___info {
   color: var(--ifm-color-secondary-contrast-foreground);
+  background-color: var(--ifm-color-secondary-contrast-background);
+}
+
+.Pill___warning {
+  background-color: var(--ifm-color-warning-contrast-background);
+  color: var(--ifm-color-warning-contrast-foreground);
 }

src/components/Pill/Pill.tsx

@@ -4,7 +4,7 @@ import styles from './Pill.module.css';
 type Props = {
   children: React.ReactNode;
   className?: string;
-  variant?: 'info';
+  variant?: 'info' | 'warning';
 };
 
 export function Pill({ children, className, variant = 'info' }) {