[6.x] Storybook - closer match Statamic branding

.storybook/manager-head.html

@@ -6,3 +6,5 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="manager-head.css">

.storybook/manager.ts

@@ -6,9 +6,12 @@ const theme = create({
   base: 'light',
   brandTitle: 'Statamic UI Components',
   brandUrl: 'https://statamic.dev',
-  brandImage: '/logo.png',
+  brandImage: '/logo.svg',
   fontBase: '"Lexend", sans-serif',
-  fontCode: '"Source Code Pro", monospace'
+  fontCode: '"Source Code Pro", monospace',
+
+   appBorderColor: 'hsl(287deg 80% 90%)',
+   textColor: '#181a1b',
 });
 
 addons.setConfig({

.storybook/preview.ts

@@ -84,6 +84,7 @@ const preview: Preview = {
                 base: 'light',
                 fontBase: '"Lexend", sans-serif',
                 fontCode: '"Source Code Pro", monospace',
+                textColor: '#181a1b',
             }),
             source: {
                 transform: (code: string) => cleanCodeSnippet(code),

.storybook/public/manager-head.css

@@ -0,0 +1,55 @@
+:root {
+    --color-purple-light-1: hsl(256deg 60% 85%);
+    --color-purple: hsl(256deg 70% 55%);
+}
+
+/* GROUP SIDEBAR
+=================================================== */
+.sidebar-container {
+    .sidebar-item {
+        --tree-node-background-hover: hsl(256deg 60% 90%)!important;
+    }
+    [data-selected="true"],
+    [data-selected="true"] *,
+    [data-selected="true"] *:hover {
+        background: var(--color-purple-light-1)!important;
+        background: var(--color-purple)!important;
+        box-shadow: none!important;
+        outline: none;
+    }
+    [data-selected="true"] {
+        border-radius: 10px;
+        @supports (corner-shape: squircle) {
+            border-radius: 50px;
+            corner-shape: squircle;
+        }
+    }
+}
+
+/* GROUP TOPBAR
+=================================================== */
+.sb-bar {
+    /* Theme Selector */
+    [id*="select-"] {
+        background: hsl(256deg 60% 96%);
+        color: var(--color-purple);
+    }
+    button {
+        &:hover {
+            color: var(--color-purple);
+            background: hsl(256deg 60% 93%);
+        }
+    }
+}
+/* This is the best we can do, there are no other hooks */
+[aria-label="Theme selector"] {
+    [role="option"] {
+        &[aria-selected="true"] {
+            color: var(--color-purple);
+        }
+        &:hover {
+            color: var(--color-purple);
+            background: hsl(256deg 60% 96%);
+        }
+    }
+}