Theming: Update manager theme

code/ui/.storybook/preview-head.html

@@ -3,20 +3,23 @@
   /* the default light and dark themes mimic the prefers-color-scheme: light/dark defaults in default-theme.css */
   html.theme-light {
     --sb-accent: #029cfd;
+    --sb-background: #fff;
+    --sb-backgroundSidebar: #f6f9fc;
   }
   html.theme-dark {
-    --sb-accent: #150a8d;
+    --sb-accent: #029cfd;
+    --sb-background: #222425;
   }
   html.theme-green {
-    --sb-accent: darkgreen;
+    --sb-accent: #4bbe2e;
   }
   html.theme-red {
     --sb-accent: darkred;
     --sb-background: palevioletred;
   }
   html.theme-yellow {
-    --sb-accent: '#FFD500';
-    --sb-background: '#FFF3B8';
+    --sb-accent: #ffd500;
+    --sb-background: #fff3b8;
   }
 </style>
 <script>

code/ui/manager/src/components/sidebar/Sidebar.tsx

@@ -19,27 +19,35 @@ import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import type { CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
-import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { cssVar } from '../../utils/cssVar';
+import { tint } from 'polished';
 
 export const DEFAULT_REF_ID = 'storybook_internal';
 
-const Container = styled.nav(({ theme }) => ({
-  position: 'absolute',
-  zIndex: 1,
-  left: 0,
-  top: 0,
-  bottom: 0,
-  right: 0,
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  background: theme.background.content,
-
-  [MEDIA_DESKTOP_BREAKPOINT]: {
-    background: theme.background.app,
-  },
-}));
+const Container = styled.nav(() => {
+  const shouldTintBackground =
+    !cssVar('--sb-backgroundSidebar') &&
+    !cssVar('--sb-background') &&
+    cssVar('--sb-accent') !== '#029cfd';
+
+  const background = shouldTintBackground
+    ? tint(0.94, cssVar('--sb-accentSidebar') ?? cssVar('--sb-accent'))
+    : 'var(--sb-backgroundSidebar, var(--sb-background, var(--sb-default-backgroundSidebar)))';
+
+  return {
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    background,
+  };
+});
 
 const Top = styled(Spaced)({
   paddingLeft: 12,

code/ui/manager/src/components/sidebar/Tree.tsx

@@ -117,11 +117,11 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
 
   '&[data-selected="true"]': {
     color: theme.color.lightest,
-    background: theme.color.secondary,
+    background: 'var(--sb-accent)',
     fontWeight: theme.typography.weight.bold,
 
     '&:hover, &:focus': {
-      background: theme.color.secondary,
+      background: 'var(--sb-accent)',
     },
     svg: { color: theme.color.lightest },
   },

code/ui/manager/static/default-theme.css

@@ -2,11 +2,15 @@
   @media (prefers-color-scheme: light) {
     :root {
       --sb-accent: #029cfd;
+      --sb-default-background: #fff;
+      --sb-default-backgroundSidebar: #f6f9fc;
     }
   }
   @media (prefers-color-scheme: dark) {
     :root {
-      --sb-accent: #150a8d;
+      --sb-accent: #029cfd;
+      --sb-default-background: #222425;
+      --sb-default-backgroundSidebar: #222425;
     }
   }
 }