fix(ui): correct fuchsia color spelling throughout codebase (#16056)

packages/main/src/plugin/color-registry.ts

@@ -36,7 +36,7 @@ const {
   black,
   charcoal,
   dustypurple,
-  fuschia,
+  fuchsia,
   gray,
   green,
   neutral,
@@ -1641,9 +1641,14 @@ export class ColorRegistry {
       dark: purple[500],
       light: purple[500],
     });
+    this.registerColor(`${badge}fuchsia`, {
+      dark: fuchsia[600],
+      light: fuchsia[600],
+    });
+    // @deprecated since 2026-02-04. See https://github.com/podman-desktop/podman-desktop/issues/15187
     this.registerColor(`${badge}fuschia`, {
-      dark: fuschia[600],
-      light: fuschia[600],
+      dark: fuchsia[600],
+      light: fuchsia[600],
     });
     this.registerColor(`${badge}gray`, {
       dark: gray[600],

packages/renderer/src/lib/service/columns/Type.spec.ts

@@ -81,5 +81,5 @@ test('Expect column styling NodePort', async () => {
 
   const dot = text.parentElement?.children[0];
   expect(dot).toBeInTheDocument();
-  expect(dot).toHaveClass('text-[var(--pd-badge-fuschia)]');
+  expect(dot).toHaveClass('text-[var(--pd-badge-fuchsia)]');
 });

packages/renderer/src/lib/service/columns/Type.svelte

@@ -25,7 +25,7 @@ function getTypeAttributes(type: string): { color: string; icon: IconDefinition
       return { color: 'text-[var(--pd-badge-purple)]', icon: faBalanceScale };
     case 'NodePort':
       // faPlug: Indicates a connection point, appropriate for NodePort which exposes services on each Node's IP
-      return { color: 'text-[var(--pd-badge-fuschia)]', icon: faPlug };
+      return { color: 'text-[var(--pd-badge-fuchsia)]', icon: faPlug };
     default:
       // faQuestionCircle: Used for unknown or unspecified types
       return { color: 'text-[var(--pd-badge-gray)]', icon: faQuestionCircle };

tailwind-color-palette.json

@@ -37,7 +37,7 @@
     "800": "#59498a",
     "900": "#4a406f"
   },
-  "fuschia": {
+  "fuchsia": {
     "50": "#fdf2ff",
     "100": "#f9e3ff",
     "200": "#f4c6ff",

website/src/components/TestimonialCard.tsx

@@ -19,9 +19,9 @@ export const TestimonialCard = (props: TestimonialCardProps): JSX.Element => {
   const [showIcon, setShowIcon] = React.useState(false);
 
   return (
-    <div className="relative min-w-fit w-full h-full bg-gradient-to-br from-sky-500 to-fuschia-500 p-[2px] rounded-lg ">
+    <div className="relative min-w-fit w-full h-full bg-gradient-to-br from-sky-500 to-fuchsia-500 p-[2px] rounded-lg ">
       <img src="/img/quote.svg" alt="Quote symbol" className="absolute right-1/15 -top-6.5 rounded-full w-13 h-13 " />
-      <div className="dark:bg-fuschia-900 bg-purple-200 rounded-lg h-full">
+      <div className="dark:bg-fuchsia-900 bg-purple-200 rounded-lg h-full">
         <div className="rounded-lg p-6 h-full bg-white/50 dark:bg-black/70">
           <div className="flex flex-row items-center">
             {props.userImage && !showIcon ? (

website/src/pages/extensions/ai-lab/index.tsx

@@ -104,7 +104,7 @@ export default function Home(): JSX.Element {
             </div>
 
             {/* Application video */}
-            <div className="my-12 rounded-xl from-purple-500 bg-linear-to-r to-fuschia-500">
+            <div className="my-12 rounded-xl from-purple-500 bg-linear-to-r to-fuchsia-500">
               <div className="p-8">
                 <video className="rounded-xl w-full h-full" controls>
                   <source

website/src/pages/index.tsx

@@ -78,7 +78,7 @@ function SectionLabel(props: Readonly<{ name: string }>): JSX.Element {
 
 function Testimonials(): JSX.Element {
   return (
-    <section className="relative text-charcoal-300 dark:text-white body-font py-24 dark:bg-fuschia-900 bg-purple-200">
+    <section className="relative text-charcoal-300 dark:text-white body-font py-24 dark:bg-fuchsia-900 bg-purple-200">
       <div className="absolute bg-white/50 dark:bg-black/70 top-0 bottom-0 right-0 left-0 z-0"></div>
       <div className="container mx-auto flex flex-col">
         <h2 className="text-4xl/[1.5] font-bold mb-6 text-charcoal-300 dark:text-white pb-11 z-10">