[in-progress] new home page design

client/packages/components/src/components/ui.tsx

@@ -66,12 +66,23 @@ export const Label = twel(
   'text-sm font-bold dark:text-neutral-400 text-gray-700',
 );
 
-export const LogoIcon = ({ size = 'mini' }: { size?: 'mini' | 'normal' }) => {
+export const LogoIcon = ({
+  size = 'mini',
+  className,
+}: {
+  size?: 'mini' | 'normal';
+  className?: string;
+}) => {
   const sizeToClass = {
     mini: 'h-4 w-4',
     normal: 'h-6 w-6',
   };
-  return <img src="/img/icon/logo-512.svg" className={sizeToClass[size]} />;
+  return (
+    <img
+      src="/img/icon/logo-512.svg"
+      className={cn(sizeToClass[size], className)}
+    />
+  );
 };
 
 // controls

client/packages/components/src/style.css

@@ -2,6 +2,63 @@
 
 @plugin '@tailwindcss/forms';
 
+@layer base {
+  @font-face {
+    font-family: 'Berk Mono';
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('https://stopaio.s3.amazonaws.com/public/BerkeleyMono-Regular.woff2')
+      format('woff2');
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Berk Mono';
+    font-weight: normal;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('https://stopaio.s3.amazonaws.com/public/BerkeleyMono-Italic.woff2')
+      format('woff2');
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Berk Mono';
+    font-weight: bold;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('https://stopaio.s3.amazonaws.com/public/BerkeleyMono-Bold.woff2')
+      format('woff2');
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Berk Mono';
+    font-weight: normal;
+    font-style: italic;
+    font-stretch: normal;
+    src: url('https://stopaio.s3.amazonaws.com/public/BerkeleyMono-BoldItalic.woff2')
+      format('woff2');
+    font-display: swap;
+  }
+
+  @font-face {
+    font-family: 'Switzer';
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    src: url('/fonts/Switzer-Variable.woff2') format('woff2');
+    font-display: swap;
+  }
+}
+
+@theme {
+  --default-font-family: 'Switzer', var(--font-switzer), 'Georgia';
+  --default-mono-font-family: 'Berk Mono', var(--font-berk-mono), 'monospace';
+  --font-mono: 'Berk Mono';
+}
+
 @custom-variant dark (&:where(.dark, .dark *));
 
 @layer base {
@@ -13,3 +70,7 @@
     border-color: oklch(92.8% 0.006 264.531);
   }
 }
+
+html {
+  --default-mono-font-family: 'Berk Mono', var(--font-berk-mono), 'monospace';
+}

client/packages/components/tailwind.config.cjs

@@ -23,7 +23,7 @@ module.exports = {
   plugins: [],
   theme: {
     fontFamily: {
-      sans: ['"IBM Plex Sans"', ...sans],
+      sans: ['Switzer', '"IBM Plex Sans"', ...sans],
       mono: [
         'Berk Mono',
         'ui-monospace',
@@ -36,7 +36,14 @@ module.exports = {
         'monospace',
       ],
     },
-    extend: {},
+    extend: {
+      colors: {
+        'secondary-border': '#ECECEC',
+        'secondary-fill': '#F2F2F2',
+        'off-black': '#333333',
+        surface: '#cacaca',
+      },
+    },
   },
   future: { hoverOnlyWhenSupported: true },
 };

client/packages/core/src/index.ts

@@ -283,6 +283,12 @@ function initGlobalInstantCoreStore(): Record<string, any> {
 function reactorKey(config: InstantConfig<any, boolean>): string {
   // @ts-expect-error
   const adminToken = config.__adminToken;
+  // Sometimes you _want_ to simulate two separate db instances in the same
+  // page. This can happen when doing real-time demos. To make this work we
+  // have a hidden `__extraDedupeKey` that you can use to differentiate db
+  // configs that are otherwise exactly the same.
+  // @ts-expect-error
+  const extraDedupeKey = config.__extraDedupeKey;
   return (
     config.appId +
     '_' +
@@ -292,7 +298,9 @@ function reactorKey(config: InstantConfig<any, boolean>): string {
     '_' +
     (adminToken || 'client_only') +
     '_' +
-    config.useDateObjects
+    config.useDateObjects +
+    '_' +
+    (extraDedupeKey || '')
   );
 }