Merge branch 'master' into pr-13512

Author: jasonvarga

.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-head.html

@@ -5,7 +5,7 @@
 
 <link rel="preconnect" href="https://use.typekit.net" crossorigin>
 <link rel="preconnect" href="https://p.typekit.net" crossorigin>
-<link rel="stylesheet" href="https://use.typekit.net/wyy0pka.css"/>
+<link rel="stylesheet" href="https://use.typekit.net/wyy0pka.css">
 
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

.storybook/preview.ts

@@ -13,7 +13,7 @@ import PortalVue from 'portal-vue';
 import FullscreenHeader from '@/components/publish/FullscreenHeader.vue';
 import Portal from '@/components/portals/Portal.vue';
 import PortalTargets from '@/components/portals/PortalTargets.vue';
-import { portals, stacks } from '@api';
+import {keys, portals, slug, stacks} from '@api';
 
 // Intercept Inertia navigation and log to Actions tab.
 router.on('before', (event) => {
@@ -31,6 +31,11 @@ setup(async (app) => {
                   linkToDocs: true,
                   paginationSize: 50,
                   paginationSizeOptions: [10, 25, 50, 100, 500],
+                  sites: [{
+                      handle: 'default',
+                      lang: 'en',
+                  }],
+                  selectedSite: 'default',
               };
 
               return config[key] ?? null;
@@ -53,6 +58,8 @@ setup(async (app) => {
   app.config.globalProperties.cp_url = (url) => url;
   app.config.globalProperties.$portals = portals;
   app.config.globalProperties.$stacks = stacks;
+  app.config.globalProperties.$slug = slug;
+  app.config.globalProperties.$keys = keys;
 
   app.use(PortalVue, { portalName: 'v-portal' });
 
@@ -77,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/logo.svg

@@ -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%);
+        }
+    }
+}