Prettier 2: Electric Boogaloo (#6113)

# Description of Changes
When I added Prettier formatting in #6052, my aim was to use just the
default settings in Prettier. Turns out, Prettier looks _really hard_
for any config files if it's not explicitly given one, which means that
if a developer has some sort of Prettier config file lying around on
their system, Prettier might find it and use it. Also, Prettier changes
its defaults based on stuff in `.editorconfig` without any good way of
disabling that behaviour explicitly in its config file.

To solve both of these issues, I've introduced a `.prettierrc` file
which sets Prettier's defaults explicitly, and then reformatted all our
code _again_ in Prettier's actual default settings. This should achieve
the aim of #6052 and remove the possibility for it breaking on different
dev computers.

frontend/src/core/components/tools/ToolPanel.css

@@ -1,32 +1,124 @@
 /* CSS Custom Properties for Fullscreen Mode */
 .tool-panel__fullscreen-surface-inner {
-  --fullscreen-bg-surface-1: color-mix(in srgb, var(--bg-toolbar) 96%, transparent);
-  --fullscreen-bg-surface-2: color-mix(in srgb, var(--bg-background) 90%, transparent);
+  --fullscreen-bg-surface-1: color-mix(
+    in srgb,
+    var(--bg-toolbar) 96%,
+    transparent
+  );
+  --fullscreen-bg-surface-2: color-mix(
+    in srgb,
+    var(--bg-background) 90%,
+    transparent
+  );
   --fullscreen-bg-header: var(--bg-toolbar);
   --fullscreen-bg-controls-1: var(--bg-toolbar);
-  --fullscreen-bg-controls-2: color-mix(in srgb, var(--bg-toolbar) 95%, var(--bg-background));
-  --fullscreen-bg-body-1: color-mix(in srgb, var(--bg-background) 86%, transparent);
-  --fullscreen-bg-body-2: color-mix(in srgb, var(--bg-toolbar) 78%, transparent);
+  --fullscreen-bg-controls-2: color-mix(
+    in srgb,
+    var(--bg-toolbar) 95%,
+    var(--bg-background)
+  );
+  --fullscreen-bg-body-1: color-mix(
+    in srgb,
+    var(--bg-background) 86%,
+    transparent
+  );
+  --fullscreen-bg-body-2: color-mix(
+    in srgb,
+    var(--bg-toolbar) 78%,
+    transparent
+  );
   --fullscreen-bg-group: color-mix(in srgb, var(--bg-toolbar) 82%, transparent);
   --fullscreen-bg-item: color-mix(in srgb, var(--bg-toolbar) 88%, transparent);
-  --fullscreen-bg-list-item: color-mix(in srgb, var(--bg-toolbar) 86%, transparent);
-  --fullscreen-bg-icon-detailed: color-mix(in srgb, var(--bg-muted) 75%, transparent);
-  --fullscreen-bg-icon-compact: color-mix(in srgb, var(--bg-muted) 70%, transparent);
-  --fullscreen-border-subtle-75: color-mix(in srgb, var(--border-subtle) 75%, transparent);
-  --fullscreen-border-subtle-70: color-mix(in srgb, var(--border-subtle) 70%, transparent);
-  --fullscreen-border-subtle-65: color-mix(in srgb, var(--border-subtle) 65%, transparent);
-  --fullscreen-border-favorites: color-mix(in srgb, var(--special-color-favorites) 25%, var(--border-subtle));
-  --fullscreen-border-recommended: color-mix(in srgb, var(--special-color-recommended) 25%, var(--border-subtle));
-  --fullscreen-shadow-primary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%, transparent);
-  --fullscreen-shadow-secondary: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%, transparent);
-  --fullscreen-shadow-group: color-mix(in srgb, var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%, transparent);
-  --fullscreen-accent-hover: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
-  --fullscreen-accent-selected: color-mix(in srgb, var(--text-primary) 30%, var(--border-subtle));
-  --fullscreen-accent-ring: color-mix(in srgb, var(--text-primary) 15%, transparent);
-  --fullscreen-accent-list-bg: color-mix(in srgb, var(--text-primary) 8%, var(--bg-toolbar));
-  --fullscreen-accent-list-border: color-mix(in srgb, var(--text-primary) 20%, var(--border-subtle));
-  --fullscreen-text-icon: color-mix(in srgb, var(--text-primary) 90%, var(--text-muted));
-  --fullscreen-text-icon-compact: color-mix(in srgb, var(--text-primary) 88%, var(--text-muted));
+  --fullscreen-bg-list-item: color-mix(
+    in srgb,
+    var(--bg-toolbar) 86%,
+    transparent
+  );
+  --fullscreen-bg-icon-detailed: color-mix(
+    in srgb,
+    var(--bg-muted) 75%,
+    transparent
+  );
+  --fullscreen-bg-icon-compact: color-mix(
+    in srgb,
+    var(--bg-muted) 70%,
+    transparent
+  );
+  --fullscreen-border-subtle-75: color-mix(
+    in srgb,
+    var(--border-subtle) 75%,
+    transparent
+  );
+  --fullscreen-border-subtle-70: color-mix(
+    in srgb,
+    var(--border-subtle) 70%,
+    transparent
+  );
+  --fullscreen-border-subtle-65: color-mix(
+    in srgb,
+    var(--border-subtle) 65%,
+    transparent
+  );
+  --fullscreen-border-favorites: color-mix(
+    in srgb,
+    var(--special-color-favorites) 25%,
+    var(--border-subtle)
+  );
+  --fullscreen-border-recommended: color-mix(
+    in srgb,
+    var(--special-color-recommended) 25%,
+    var(--border-subtle)
+  );
+  --fullscreen-shadow-primary: color-mix(
+    in srgb,
+    var(--shadow-color, rgba(15, 23, 42, 0.55)) 25%,
+    transparent
+  );
+  --fullscreen-shadow-secondary: color-mix(
+    in srgb,
+    var(--shadow-color, rgba(15, 23, 42, 0.35)) 30%,
+    transparent
+  );
+  --fullscreen-shadow-group: color-mix(
+    in srgb,
+    var(--shadow-color, rgba(15, 23, 42, 0.45)) 18%,
+    transparent
+  );
+  --fullscreen-accent-hover: color-mix(
+    in srgb,
+    var(--text-primary) 20%,
+    var(--border-subtle)
+  );
+  --fullscreen-accent-selected: color-mix(
+    in srgb,
+    var(--text-primary) 30%,
+    var(--border-subtle)
+  );
+  --fullscreen-accent-ring: color-mix(
+    in srgb,
+    var(--text-primary) 15%,
+    transparent
+  );
+  --fullscreen-accent-list-bg: color-mix(
+    in srgb,
+    var(--text-primary) 8%,
+    var(--bg-toolbar)
+  );
+  --fullscreen-accent-list-border: color-mix(
+    in srgb,
+    var(--text-primary) 20%,
+    var(--border-subtle)
+  );
+  --fullscreen-text-icon: color-mix(
+    in srgb,
+    var(--text-primary) 90%,
+    var(--text-muted)
+  );
+  --fullscreen-text-icon-compact: color-mix(
+    in srgb,
+    var(--text-primary) 88%,
+    var(--text-muted)
+  );
 }
 
 .tool-panel {
@@ -92,7 +184,12 @@
   display: flex;
   flex-direction: column;
   border-radius: 0;
-  background: linear-gradient(140deg, var(--fullscreen-bg-surface-1), var(--fullscreen-bg-surface-2)) padding-box;
+  background: linear-gradient(
+      140deg,
+      var(--fullscreen-bg-surface-1),
+      var(--fullscreen-bg-surface-2)
+    )
+    padding-box;
   border: 1px solid var(--fullscreen-border-subtle-75);
   box-shadow: none;
   backdrop-filter: blur(18px);
@@ -100,18 +197,21 @@
   /* Shared animation durations for JS + CSS (sourced from theme.css) */
   --fullscreen-anim-in-duration: var(--fullscreen-anim-duration-in);
   --fullscreen-anim-out-duration: var(--fullscreen-anim-duration-out);
-  animation: tool-panel-fullscreen-slide-in var(--fullscreen-anim-in-duration) ease forwards;
+  animation: tool-panel-fullscreen-slide-in var(--fullscreen-anim-in-duration)
+    ease forwards;
 }
 
 .tool-panel__fullscreen-surface-inner--exiting {
-  animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
+  animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration)
+    ease forwards;
 }
 
 :root[dir="rtl"] .tool-panel__fullscreen-surface-inner {
   animation-name: tool-panel-fullscreen-slide-in-rtl;
 }
 
-:root[dir="rtl"] .tool-panel__fullscreen-surface-inner.tool-panel__fullscreen-surface-inner--exiting {
+:root[dir="rtl"]
+  .tool-panel__fullscreen-surface-inner.tool-panel__fullscreen-surface-inner--exiting {
   animation-name: tool-panel-fullscreen-slide-out-rtl;
 }
 
@@ -339,12 +439,15 @@
   border-radius: 0.75rem;
 }
 
-.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon {
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"])
+  .tool-panel__fullscreen-icon {
   transform: scale(1.08);
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 15%, transparent);
+  box-shadow: 0 4px 12px
+    color-mix(in srgb, var(--text-primary) 15%, transparent);
 }
 
-.tool-panel__fullscreen-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-icon::before {
+.tool-panel__fullscreen-item:hover:not([aria-disabled="true"])
+  .tool-panel__fullscreen-icon::before {
   opacity: 1;
 }
 
@@ -425,7 +528,9 @@
   cursor: not-allowed;
 }
 
-.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]):not(:disabled),
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]):not(
+    :disabled
+  ),
 .tool-panel__fullscreen-list-item--selected {
   background: var(--fullscreen-accent-list-bg);
   border-color: var(--fullscreen-accent-list-border);
@@ -466,12 +571,14 @@
   border-radius: 0.6rem;
 }
 
-.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon {
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"])
+  .tool-panel__fullscreen-list-icon {
   transform: scale(1.06);
   box-shadow: 0 2px 8px color-mix(in srgb, var(--text-primary) 12%, transparent);
 }
 
-.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"]) .tool-panel__fullscreen-list-icon::before {
+.tool-panel__fullscreen-list-item:hover:not([aria-disabled="true"])
+  .tool-panel__fullscreen-list-icon::before {
   opacity: 1;
 }