[Testing View] feat(testing-view): new colour theme Twight

frontend/frontend-kit/ui/src/styles/globals.css

@@ -178,6 +178,63 @@ body,
   --error: #f87171;
 }
 
+/* Twight uses the mode selector's navy blue (#20274c). */
+.twight {
+  --background: #f4f6fb;
+  --foreground: #20274c;
+  --card: #ffffff;
+  --card-foreground: #20274c;
+  --popover: #ffffff;
+  --popover-foreground: #20274c;
+  --primary: #20274c;
+  --primary-foreground: #ffffff;
+  --secondary: #e6ebf7;
+  --secondary-foreground: #20274c;
+  --muted: #e6ebf7;
+  --muted-foreground: #526184;
+  --accent: #dce4f5;
+  --accent-foreground: #20274c;
+  --border: #c8d2e8;
+  --input: #c8d2e8;
+  --ring: #526fba;
+  --sidebar: #edf1f9;
+  --sidebar-foreground: #20274c;
+  --sidebar-primary: #20274c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #dce4f5;
+  --sidebar-accent-foreground: #20274c;
+  --sidebar-border: #c8d2e8;
+  --sidebar-ring: #526fba;
+}
+
+.twight.dark {
+  --background: #11162d;
+  --foreground: #edeef0;
+  --card: #1a203d;
+  --card-foreground: #edeef0;
+  --popover: #20274c;
+  --popover-foreground: #edeef0;
+  --primary: #a6bcff;
+  --primary-foreground: #20274c;
+  --secondary: #20274c;
+  --secondary-foreground: #edeef0;
+  --muted: #20274c;
+  --muted-foreground: #aab8d8;
+  --accent: #2c3863;
+  --accent-foreground: #edf2ff;
+  --border: #36436b;
+  --input: #36436b;
+  --ring: #a6bcff;
+  --sidebar: #20274c;
+  --sidebar-foreground: #edeef0;
+  --sidebar-primary: #a6bcff;
+  --sidebar-primary-foreground: #20274c;
+  --sidebar-accent: #2c3863;
+  --sidebar-accent-foreground: #edf2ff;
+  --sidebar-border: #36436b;
+  --sidebar-ring: #a6bcff;
+}
+
 @theme inline {
   /* Main colors */
   --color-background: var(--background);

frontend/testing-view/src/components/leftSidebar/ColorSchemeToggle.tsx

@@ -1,18 +1,23 @@
 import { SidebarMenuButton } from "@workspace/ui";
 import { Palette } from "@workspace/ui/icons";
 import { useStore } from "../../store/store";
+import { colorSchemes } from "../../types/app/colorSchema";
 
 const ColorSchemeToggle = () => {
   const colorScheme = useStore((s) => s.colorScheme);
   const toggleColorScheme = useStore((s) => s.toggleColorScheme);
 
-  const isPink = colorScheme === "pink";
-  const tooltip = isPink ? "Switch to Default" : "Switch to Claudia";
+  const scheme = colorSchemes[colorScheme];
+  const tooltip = `Switch to ${colorSchemes[scheme.next].label}`;
 
   return (
-    <SidebarMenuButton tooltip={tooltip} onClick={toggleColorScheme}>
+    <SidebarMenuButton
+      tooltip={tooltip}
+      aria-label={`${scheme.label} theme. ${tooltip}`}
+      onClick={toggleColorScheme}
+    >
       <Palette className="size-4" />
-      <span>{isPink ? "Claudia" : "Default"}</span>
+      <span>{scheme.label}</span>
       <div className="bg-primary ml-auto h-3 w-3 rounded-full" />
     </SidebarMenuButton>
   );

frontend/testing-view/src/layout/AppLayout.tsx

@@ -27,7 +27,7 @@ export const AppLayout = ({ children, backendConnected }: AppLayoutProps) => {
   useEffect(() => {
     const root = window.document.documentElement;
     // Remove old schemes if you have more than one
-    root.classList.remove("default", "pink");
+    root.classList.remove("default", "pink", "twight");
     root.classList.add(colorScheme);
   }, [colorScheme]);
 

frontend/testing-view/src/store/slices/appSlice.ts

@@ -1,5 +1,5 @@
 import type { StateCreator } from "zustand";
-import type { ColorScheme } from "../../types/app/colorSchema";
+import { colorSchemes, type ColorScheme } from "../../types/app/colorSchema";
 import type { AppMode } from "../../types/app/mode";
 import type { ConfigData } from "../../types/common/config";
 import type { Store } from "../store";
@@ -73,7 +73,7 @@ export const createAppSlice: StateCreator<Store, [], [], AppSlice> = (set) => ({
   setColorScheme: (scheme) => set({ colorScheme: scheme }),
   toggleColorScheme: () =>
     set((state) => ({
-      colorScheme: state.colorScheme === "default" ? "pink" : "default",
+      colorScheme: colorSchemes[state.colorScheme].next,
     })),
 
   // Dark mode

frontend/testing-view/src/types/app/colorSchema.ts

@@ -1 +1,10 @@
-export type ColorScheme = "default" | "pink";
+export type ColorScheme = "default" | "pink" | "twight";
+
+export const colorSchemes: Record<
+  ColorScheme,
+  { label: string; next: ColorScheme }
+> = {
+  default: { label: "Normal", next: "pink" },
+  pink: { label: "Claudia", next: "twight" },
+  twight: { label: "Twight", next: "default" },
+};