diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 0f6b2b130..d0b54607c 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -78,386 +78,388 @@
 
 // (2) Choosing the semantic colors from the palette
 
-:root{
-  @include light-theme {
-    .default {
-      --link-color:var(--fw-blue-400);
-      --link-hover-color:var(--fw-blue-500);
+// Light theme
 
-      --color: var(--fw-gray-900);
-      --background-color: var(--fw-beige-100);
+:is(body.theme-light, html:not(.dark)>body:not(.theme-dark)), .force-light-theme.force-light-theme.force-light-theme {
+  .default, .funkwhale {
+    --link-color:var(--fw-blue-400);
+    --link-hover-color:var(--fw-blue-500);
+
+    --color: var(--fw-gray-900);
+    --background-color: var(--fw-beige-100);
+    --border-color:var(--fw-gray-300);
+
+    --hover-color:var(--fw-gray-800);
+    --hover-background-color:var(--fw-beige-200);
+    --hover-border-color:var(--fw-gray-800);
+
+    --active-color:var(--fw-red-010);
+    --active-background-color:var(--fw-beige-400);
+    --active-border-color:var(--fw-gray-600);
+
+    --pressed-color:var(--fw-red-010);
+    --pressed-background-color:var(--fw-gray-900);
+
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:var(--fw-beige-100);
+    --disabled-border-color:var(--fw-beige-100);
+
+    &.raised {
+      --background-color:var(--fw-beige-300);
+      --border-color:var(--fw-beige-400);
+    }
+
+    --link-active-border-color:var(--fw-beige-400);
+    --link-exact-active-background-color:var(--fw-beige-400);
+    --link-exact-active-border-color:transparent;
+  }
+
+  .secondary {
+    --color: var(--fw-gray-700);
+    --background-color: var(--fw-gray-200);
+    --border-color:var(--fw-gray-700);
+
+    --hover-color:var(--fw-gray-800);
+    --hover-background-color:var(--fw-gray-300);
+    --hover-border-color:var(--fw-gray-800);
+
+    --active-color:var(--fw-gray-970);
+    --active-background-color:var(--fw-gray-400);
+    --active-border-color:var(--fw-gray-400);
+
+    --pressed-color:var(--fw-beige-200);
+    --pressed-background-color:var(--fw-gray-900);
+
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:var(--fw-gray-100);
+    --disabled-border-color:var(--fw-gray-100);
+
+    &.raised {
+      --background-color:var(--fw-gray-300);
       --border-color:var(--fw-gray-300);
-
-      --hover-color:var(--fw-gray-800);
-      --hover-background-color:var(--fw-beige-200);
-      --hover-border-color:var(--fw-gray-800);
-
-      --active-color:var(--fw-red-010);
-      --active-background-color:var(--fw-beige-400);
-      --active-border-color:var(--fw-gray-600);
-
-      --pressed-color:var(--fw-red-010);
-      --pressed-background-color:var(--fw-gray-900);
-
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:var(--fw-beige-100);
-      --disabled-border-color:var(--fw-beige-100);
-
-      &.raised {
-        --background-color:var(--fw-beige-300);
-        --border-color:var(--fw-beige-400);
-      }
-
-      --link-active-border-color:var(--fw-beige-400);
-      --link-exact-active-background-color:var(--fw-beige-400);
-      --link-exact-active-border-color:transparent;
+      --hover-background-color:var(--fw-gray-400);
+      --active-background-color:var(--fw-gray-500);
     }
 
-    .secondary {
-      --color: var(--fw-gray-700);
-      --background-color: var(--fw-gray-200);
-      --border-color:var(--fw-gray-700);
+    --link-color:var(--fw-blue-600);
+    --link-hover-color:var(--fw-blue-700);
+  }
 
-      --hover-color:var(--fw-gray-800);
-      --hover-background-color:var(--fw-gray-300);
-      --hover-border-color:var(--fw-gray-800);
-
-      --active-color:var(--fw-gray-970);
-      --active-background-color:var(--fw-gray-400);
-      --active-border-color:var(--fw-gray-400);
-
-      --pressed-color:var(--fw-beige-200);
-      --pressed-background-color:var(--fw-gray-900);
-
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:var(--fw-gray-100);
-      --disabled-border-color:var(--fw-gray-100);
-
-      &.raised {
-        --background-color:var(--fw-gray-300);
-        --border-color:var(--fw-gray-300);
-        --hover-background-color:var(--fw-gray-400);
-        --active-background-color:var(--fw-gray-500);
-      }
-
-      --link-color:var(--fw-blue-600);
-      --link-hover-color:var(--fw-blue-700);
+  .primary {
+    --color: var(--fw-blue-010);
+    --background-color:var(--fw-blue-400);
+    --border-color:var(--fw-blue-400);
+    &> .primary {
+      --border-color:var(--fw-blue-010);
     }
 
-    .primary {
-      --color: var(--fw-blue-010);
-      --background-color:var(--fw-blue-400);
-      --border-color:var(--fw-blue-400);
-      &> .primary {
-        --border-color:var(--fw-blue-010);
-      }
+    --hover-color: var(--fw-blue-010);
+    --hover-background-color:var(--fw-blue-500);
 
-      --hover-color: var(--fw-blue-010);
-      --hover-background-color:var(--fw-blue-500);
+    --active-color: var(--fw-blue-010);
+    --active-background-color:var(--fw-blue-600);
 
-      --active-color: var(--fw-blue-010);
-      --active-background-color:var(--fw-blue-600);
+    --pressed-color:var(--fw-blue-010);
+    --pressed-background-color:var(--fw-blue-900);
 
-      --pressed-color:var(--fw-blue-010);
-      --pressed-background-color:var(--fw-blue-800);
+    --disabled-color:var(--fw-blue-900);
+    --disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
+    --disabled-border-color:transparent;
 
-      --disabled-color:var(--fw-blue-900);
-      --disabled-background-color:color-mix(in oklab, var(--fw-blue-100) 20%, var(--fw-blue-400));
-      --disabled-border-color:transparent;
-
-      &.raised {
-        --background-color:var(--fw-blue-500);
-        --hover-background-color:var(--fw-blue-600);
-        --active-background-color:var(--fw-blue-700);
-      }
-
-      &:not(:is(.ghost, .outline)) {
-        --link-color:var(--fw-blue-010);
-        --link-hover-color:white;
-      }
+    &.raised {
+      --background-color:var(--fw-blue-500);
+      --hover-background-color:var(--fw-blue-600);
+      --active-background-color:var(--fw-blue-700);
     }
 
-    .destructive {
-      --color: var(--fw-red-010);
-      --background-color: var(--fw-red-500);
-      --border-color:var(--fw-red-500);
-
-      --hover-color:var(--fw-gray-100);
-      --hover-background-color:var(--fw-red-600);
-      --hover-border-color:var(--fw-red-600);
-
-      --active-color:var(--fw-gray-100);
-      --active-background-color:var(--fw-red-700);
-      --active-border-color:var(--fw-red-700);
-
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:var(--fw-gray-100);
-      --disabled-border-color:var(--fw-gray-100);
-
-      &:not(:is(.ghost, .outline)) {
-        --link-color:var(--fw-blue-010);
-        --link-hover-color:white;
-      }
-    }
-
-    .blue {
-      --color: var(--fw-blue-900);
-      --background-color: var(--fw-pastel-blue-1);
-      &.raised, .action>button {
-        --background-color: var(--fw-pastel-blue-2);
-        --hover-background-color: var(--fw-pastel-blue-3);
-        --active-background-color: var(--fw-pastel-blue-4);
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
-
-      --link-color:var(--fw-blue-010);
-      --link-hover-color:white;
-    }
-
-    .red {
-      --color: var(--fw-red-900);
-      --background-color: var(--fw-pastel-red-2);
-      &.raised, .action>button {
-        --background-color: var(--fw-pastel-red-2);
-        --hover-background-color: var(--fw-pastel-red-3);
-        --active-background-color: var(--fw-pastel-red-4);
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
-
-      --link-color:var(--fw-blue-010);
-      --link-hover-color:white;
-    }
-
-    .purple {
-      --color: var(--fw-gray-970);
-      --background-color: var(--fw-pastel-purple-1);
-      &.raised, .action>button {
-        --background-color: var(--fw-pastel-purple-2);
-        --hover-background-color: var(--fw-pastel-purple-3);
-        --active-background-color: var(--fw-pastel-purple-4);
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
-
-      --link-color:var(--fw-blue-010);
-      --link-hover-color:white;
-    }
-
-    .green {
-      --color: var(--fw-gray-900);
-      --background-color: var(--fw-pastel-green-1);
-      &.raised, .action>button {
-        --background-color: var(--fw-pastel-green-2);
-        --hover-background-color: var(--fw-pastel-green-3);
-        --active-background-color: var(--fw-pastel-green-4);
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
-
-      --link-color:var(--fw-blue-010);
-      --link-hover-color:white;
-    }
-
-    .yellow {
-      --color: var(--fw-gray-900);
-      --background-color: var(--fw-pastel-yellow-1);
-      &.raised, .action>button {
-        --background-color: var(--fw-pastel-yellow-2);
-        --hover-background-color: var(--fw-pastel-yellow-3);
-        --active-background-color: var(--fw-pastel-yellow-4);
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
-
+    &:not(:is(.ghost, .outline)) {
       --link-color:var(--fw-blue-010);
       --link-hover-color:white;
     }
   }
 
-  @include dark-theme {
-    .default {
-      --link-color:var(--fw-gray-300);
-      --link-hover-color:var(--fw-gray-200);
-      --color: var(--fw-beige-100);
-      --background-color: var(--fw-gray-970);
-      --border-color:var(--fw-gray-700);
+  .destructive {
+    --color: var(--fw-red-010);
+    --background-color: var(--fw-red-500);
+    --border-color:var(--fw-red-500);
 
-      --hover-color:var(--fw-beige-400);
-      --hover-background-color:var(--fw-gray-950);
-      --hover-border-color:var(--fw-beige-400);
+    --hover-color:var(--fw-gray-100);
+    --hover-background-color:var(--fw-red-600);
+    --hover-border-color:var(--fw-red-600);
 
-      --active-color:var(--fw-gray-200);
-      --active-background-color:var(--fw-gray-700);
-      --active-border-color:var(--fw-gray-700);
+    --active-color:var(--fw-gray-100);
+    --active-background-color:var(--fw-red-700);
+    --active-border-color:var(--fw-red-700);
 
-      --pressed-color:var(--fw-red-010);
-      --pressed-background-color:var(--fw-secondary);
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:var(--fw-gray-100);
+    --disabled-border-color:var(--fw-gray-100);
 
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:var(--fw-gray-950);
-      --disabled-border-color:var(--fw-gray-950);
+    &:not(:is(.ghost, .outline)) {
+      --link-color:var(--fw-blue-010);
+      --link-hover-color:white;
+    }
+  }
 
-      &.raised{
-        --background-color:var(--fw-gray-900);
-        --border-color:var(--fw-gray-600);
-        --link-color:var(--fw-gray-400);
-        --link-hover-color:var(--fw-gray-200);
-      }
-
-      --link-active-border-color:var(--fw-gray-700);
-      --link-exact-active-background-color:var(--fw-secondary);
-      --link-exact-active-border-color:var(--fw-secondary);
+  .blue {
+    --color: var(--fw-blue-900);
+    --background-color: var(--fw-pastel-blue-1);
+    &.raised, .action>button {
+      --background-color: var(--fw-pastel-blue-2);
+      --hover-background-color: var(--fw-pastel-blue-3);
+      --active-background-color: var(--fw-pastel-blue-4);
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
 
-    .secondary {
-      --color: var(--fw-gray-300);
-      --background-color: var(--fw-gray-850);
+    --link-color:var(--fw-blue-010);
+    --link-hover-color:white;
+  }
+
+  .red {
+    --color: var(--fw-red-900);
+    --background-color: var(--fw-pastel-red-2);
+    &.raised, .action>button {
+      --background-color: var(--fw-pastel-red-2);
+      --hover-background-color: var(--fw-pastel-red-3);
+      --active-background-color: var(--fw-pastel-red-4);
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
+    }
+
+    --link-color:var(--fw-blue-010);
+    --link-hover-color:white;
+  }
+
+  .purple {
+    --color: var(--fw-gray-970);
+    --background-color: var(--fw-pastel-purple-1);
+    &.raised, .action>button {
+      --background-color: var(--fw-pastel-purple-2);
+      --hover-background-color: var(--fw-pastel-purple-3);
+      --active-background-color: var(--fw-pastel-purple-4);
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
+    }
+
+    --link-color:var(--fw-blue-010);
+    --link-hover-color:white;
+  }
+
+  .green {
+    --color: var(--fw-gray-900);
+    --background-color: var(--fw-pastel-green-1);
+    &.raised, .action>button {
+      --background-color: var(--fw-pastel-green-2);
+      --hover-background-color: var(--fw-pastel-green-3);
+      --active-background-color: var(--fw-pastel-green-4);
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
+    }
+
+    --link-color:var(--fw-blue-010);
+    --link-hover-color:white;
+  }
+
+  .yellow {
+    --color: var(--fw-gray-900);
+    --background-color: var(--fw-pastel-yellow-1);
+    &.raised, .action>button {
+      --background-color: var(--fw-pastel-yellow-2);
+      --hover-background-color: var(--fw-pastel-yellow-3);
+      --active-background-color: var(--fw-pastel-yellow-4);
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
+    }
+
+    --link-color:var(--fw-blue-010);
+    --link-hover-color:white;
+  }
+}
+
+// Dark theme
+
+:is(body.theme-dark, html.dark>body:not(.theme-light)), .force-dark-theme.force-dark-theme.force-dark-theme {
+  .default, .funkwhale {
+    --link-color:var(--fw-gray-300);
+    --link-hover-color:var(--fw-gray-200);
+    --color: var(--fw-beige-100);
+    --background-color: var(--fw-gray-970);
+    --border-color:var(--fw-gray-700);
+
+    --hover-color:var(--fw-beige-400);
+    --hover-background-color:var(--fw-gray-950);
+    --hover-border-color:var(--fw-beige-400);
+
+    --active-color:var(--fw-gray-200);
+    --active-background-color:var(--fw-gray-700);
+    --active-border-color:var(--fw-gray-700);
+
+    --pressed-color:var(--fw-red-010);
+    --pressed-background-color:var(--fw-secondary);
+
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:var(--fw-gray-950);
+    --disabled-border-color:var(--fw-gray-950);
+
+    &.raised{
+      --background-color:var(--fw-gray-900);
       --border-color:var(--fw-gray-600);
-
-      --hover-color:var(--fw-gray-200);
-      --hover-background-color:var(--fw-gray-800);
-      --hover-border-color:var(--fw-gray-300);
-
-      --active-color:var(--fw-gray-300);
-      --active-background-color:var(--fw-gray-970);
-      --active-border-color:var(--fw-gray-400);
-
-      --pressed-color:var(--fw-beige-200);
-      --pressed-background-color:var(--fw-gray-900);
-
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
-      --disabled-border-color:transparent;
-
-      &.raised {
-        --color: var(--fw-gray-200);
-        --background-color:var(--fw-gray-700);
-        --disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
-        --border-color:var(--fw-gray-500);
-        --hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
-        --active-color:var(--fw-gray-400);
-        --active-background-color:var(--fw-gray-900);
-      }
-
-      --link-color:var(--fw-gray-500);
-      --link-hover-color:var(--fw-gray-600);
+      --link-color:var(--fw-gray-400);
+      --link-hover-color:var(--fw-gray-200);
     }
 
-    .primary {
-      --color: var(--fw-blue-010);
-      --background-color:var(--fw-blue-600);
-      --border-color:var(--fw-blue-010);
+    --link-active-border-color:var(--fw-gray-700);
+    --link-exact-active-background-color:var(--fw-secondary);
+    --link-exact-active-border-color:var(--fw-secondary);
+  }
 
-      --hover-color: var(--fw-blue-010);
-      --hover-background-color:var(--fw-blue-500);
+  .secondary {
+    --color: var(--fw-gray-300);
+    --background-color: var(--fw-gray-850);
+    --border-color:var(--fw-gray-600);
 
-      --active-color: var(--fw-blue-010);
-      --active-background-color:var(--fw-blue-800);
+    --hover-color:var(--fw-gray-200);
+    --hover-background-color:var(--fw-gray-800);
+    --hover-border-color:var(--fw-gray-300);
 
-      --pressed-color:var(--fw-blue-010);
-      --pressed-background-color:var(--fw-blue-700);
+    --active-color:color-mix(in oklab, var(--fw-gray-200) 50%, var(--fw-gray-300));
+    --active-background-color:color-mix(in oklab, var(--fw-gray-950), var(--fw-gray-970));
+    --active-border-color:var(--fw-gray-400);
 
-      --disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
-      --disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
-      --disabled-border-color:transparent;
+    --pressed-color:var(--fw-beige-200);
+    --pressed-background-color:var(--fw-gray-900);
 
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:color-mix(in oklab, var(--fw-gray-900) 20%, var(--fw-gray-950));
+    --disabled-border-color:transparent;
 
-      &.raised {
-        --background-color:var(--fw-blue-500);
-        --hover-background-color:var(--fw-blue-400);
-        --active-background-color:var(--fw-blue-900);
-        --disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
-      }
+    &.raised {
+      --color: var(--fw-gray-200);
+      --background-color:var(--fw-gray-700);
+      --disabled-background-color:color-mix(in oklab, var(--fw-gray-800) 80%, var(--fw-gray-700));
+      --border-color:var(--fw-gray-500);
+      --hover-background-color:color-mix(in oklab, var(--fw-gray-600) 20%, var(--fw-gray-700));
+      --active-color:var(--fw-gray-400);
+      --active-background-color:var(--fw-gray-900);
     }
 
-    .destructive {
-      --color: var(--fw-red-010);
-      --background-color: var(--fw-red-500);
-      --border-color:var(--fw-red-500);
+    --link-color:var(--fw-gray-500);
+    --link-hover-color:var(--fw-gray-600);
+  }
 
-      --hover-color:var(--fw-gray-100);
-      --hover-background-color:var(--fw-red-600);
-      --hover-border-color:var(--fw-red-600);
+  .primary {
+    --color: var(--fw-blue-010);
+    --background-color:var(--fw-blue-600);
+    --border-color:var(--fw-blue-010);
 
-      --active-color:var(--fw-gray-100);
-      --active-background-color:var(--fw-red-700);
-      --active-border-color:var(--fw-red-700);
+    --hover-color: var(--fw-blue-010);
+    --hover-background-color:var(--fw-blue-500);
 
-      --disabled-color:var(--fw-gray-500);
-      --disabled-background-color:var(--fw-gray-100);
-      --disabled-border-color:var(--fw-gray-100);
+    --active-color: var(--fw-blue-010);
+    --active-background-color:var(--fw-blue-800);
+
+    --pressed-color:var(--fw-blue-010);
+    --pressed-background-color:var(--fw-blue-700);
+
+    --disabled-color:color-mix(in oklab, var(--fw-blue-010) 10%, var(--fw-blue-100));
+    --disabled-background-color:color-mix(in oklab, var(--fw-blue-700) 50%, var(--fw-blue-600));
+    --disabled-border-color:transparent;
+
+
+    &.raised {
+      --background-color:var(--fw-blue-500);
+      --hover-background-color:var(--fw-blue-400);
+      --active-background-color:var(--fw-blue-900);
+      --disabled-background-color:color-mix(in oklab, var(--fw-blue-500) 20%, var(--fw-blue-600));
     }
+  }
 
-    .blue {
-      --color: var(--fw-pastel-blue-1);
-      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-blue-1));
-      &.raised, .action>button {
-        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2));
-        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3));
-        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4));
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
+  .destructive {
+    --color: var(--fw-red-010);
+    --background-color: var(--fw-red-500);
+    --border-color:var(--fw-red-500);
+
+    --hover-color:var(--fw-gray-100);
+    --hover-background-color:var(--fw-red-600);
+    --hover-border-color:var(--fw-red-600);
+
+    --active-color:var(--fw-gray-100);
+    --active-background-color:var(--fw-red-700);
+    --active-border-color:var(--fw-red-700);
+
+    --disabled-color:var(--fw-gray-500);
+    --disabled-background-color:var(--fw-gray-100);
+    --disabled-border-color:var(--fw-gray-100);
+  }
+
+  .blue {
+    --color: var(--fw-pastel-blue-1);
+    --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-blue-1));
+    &.raised, .action>button {
+      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-2));
+      --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-3));
+      --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-blue-4));
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
+  }
 
-    .red {
-      --color: var(--fw-pastel-red-1);
-      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-red-2));
-      &.raised, .action>button {
-        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2));
-        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3));
-        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4));
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
+  .red {
+    --color: var(--fw-pastel-red-1);
+    --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-red-2));
+    &.raised, .action>button {
+      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-2));
+      --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-3));
+      --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-red-4));
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
+  }
 
-    .purple {
-      --color: var(--fw-gray-100);
-      --background-color: color-mix(in oklab, black 55%, var(--fw-pastel-purple-1));
-      &.raised, .action>button {
-        --background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
-        --hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
-        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-purple-4));
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
+  .purple {
+    --color: var(--fw-gray-100);
+    --background-color: color-mix(in oklab, black 55%, var(--fw-pastel-purple-1));
+    &.raised, .action>button {
+      --background-color: color-mix(in oklab, black 61%, var(--fw-pastel-purple-2));
+      --hover-background-color: color-mix(in oklab, black 66%, var(--fw-pastel-purple-3));
+      --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-purple-4));
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
+  }
 
-    .green {
-      --color: var(--fw-pastel-green-1);
-      --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-green-1));
-      &.raised, .action>button {
-        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2));
-        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3));
-        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4));
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
+  .green {
+    --color: var(--fw-pastel-green-1);
+    --background-color: color-mix(in oklab, black 66%, var(--fw-pastel-green-1));
+    &.raised, .action>button {
+      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-2));
+      --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-3));
+      --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-green-4));
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
+  }
 
-    .yellow {
-      --color: var(--fw-pastel-yellow-1);
-      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
-      &.raised, .action>button {
-        --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2));
-        --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3));
-        --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4));
-        --disabled-color: var(--fw-gray-700);
-        --disabled-border-color: var(--fw-gray-400);
-        --disabled-background-color: transparent;
-      }
+  .yellow {
+    --color: var(--fw-pastel-yellow-1);
+    --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-1));
+    &.raised, .action>button {
+      --background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-2));
+      --hover-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-3));
+      --active-background-color: color-mix(in oklab, black 71%, var(--fw-pastel-yellow-4));
+      --disabled-color: var(--fw-gray-700);
+      --disabled-border-color: var(--fw-gray-400);
+      --disabled-background-color: transparent;
     }
   }
 }