logo theme

frontend/src/sidebar/Sidebar.tsx

@@ -772,7 +772,7 @@ const Sidebar: React.FC<SidebarProps> = ({
               ref={tenantButtonRef}
             >
               <span className="sidebar__title">
-                <LogoIcon className="sidebar__logo" />
+                <LogoIcon className="sidebar__logo" variant="small" />
                 <span className="sidebar__title-text">Papercrate</span>
                 {tenantName ? <span className="sidebar__tenant"> / {tenantName}</span> : null}
               </span>

frontend/src/sidebar/SidebarContext.tsx

@@ -32,9 +32,9 @@ const SIDEBAR_COLLAPSE_STORAGE_KEY = 'papercrate_sidebar_collapsed';
 const SidebarContext = createContext<SidebarContextValue | null>(null);
 
 const THEME_STORAGE_KEY = 'papercrate_theme_settings';
-const DEFAULT_NEUTRAL_HUE = 35;
-const DEFAULT_NEUTRAL_CHROMA = 0.5;
-const DEFAULT_NEUTRAL_CONTRAST = 0.5;
+const DEFAULT_NEUTRAL_HUE = 29;
+const DEFAULT_NEUTRAL_CHROMA = 0.44;
+const DEFAULT_NEUTRAL_CONTRAST = 0.56;
 const DEFAULT_THEME_MODE = 'system';
 const THEME_MODES = ['system', 'light', 'dark'];
 

frontend/src/styles/auth/login.css

@@ -36,9 +36,8 @@
 }
 
 .login-screen__brand img {
-  width: 5.5rem;
-  height: 5.5rem;
-  border-radius: 1rem;
+  width: 11rem;
+  height: 11rem;
   border: none;
   background: transparent;
   padding: 0;

frontend/src/styles/base/theme.css

@@ -1,13 +1,13 @@
 :root {
   color-scheme: light dark;
 
-  --neutral-hue: 35deg;
+  --neutral-hue: 29deg;
   --surface-hue-shift: 6deg;
   --foreground-hue-offset: 20deg;
   --accent-hue-offset: 0deg;
   --dark-hue-offset: 40deg;
   --dark-foreground-hue-offset: 20deg;
-  --neutral-chroma: 0.5;
+  --neutral-chroma: 0.44;
   --neutral-chroma-min: 0.01;
   --neutral-chroma-max: 0.20;
   --neutral-chroma-range: calc(var(--neutral-chroma-max) - var(--neutral-chroma-min));
@@ -15,7 +15,7 @@
     var(--neutral-chroma-min)
     + clamp(0, var(--neutral-chroma), 1) * var(--neutral-chroma-range)
   );
-  --neutral-contrast: 0.5;
+  --neutral-contrast: 0.56;
   --neutral-contrast-amount: calc(0.85 + var(--neutral-contrast) * 0.55);
   --neutral-contrast-baseline: 1.125;
   --neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));

frontend/src/ui/icons.tsx

@@ -54,6 +54,7 @@ import {
 } from '@tabler/icons-react';
 import FolderSvg from '../assets/folder.svg';
 const logoWebp = new URL('../assets/logo.webp', import.meta.url).toString();
+const logoSmallWebp = new URL('../assets/logo_small.webp', import.meta.url).toString();
 import composeClassName from './classNames';
 
 type TablerIconComponent = (props: TablerIconProps) => JSX.Element;
@@ -101,17 +102,27 @@ export const FolderIcon: TablerIconComponent = ({ className, size = 16, title, .
   );
 };
 
-export const LogoIcon: React.FC<{ className?: string; width?: number; height?: number }> = ({ className, width = 24, height = 24 }) => (
-  <img
-    src={logoWebp}
-    className={composeClassName('logo-icon', className)}
-    width={width}
-    height={height}
-    alt="Papercrate logo"
-    loading="lazy"
-    decoding="async"
-  />
-);
+interface LogoIconProps {
+  className?: string;
+  width?: number;
+  height?: number;
+  variant?: 'default' | 'small';
+}
+
+export const LogoIcon: React.FC<LogoIconProps> = ({ className, width = 24, height = 24, variant = 'default' }) => {
+  const src = variant === 'small' ? logoSmallWebp : logoWebp;
+  return (
+    <img
+      src={src}
+      className={composeClassName('logo-icon', className)}
+      width={width}
+      height={height}
+      alt="Papercrate logo"
+      loading="lazy"
+      decoding="async"
+    />
+  );
+};
 
 export const TagIcon: TablerIconComponent = ({ className, size = '1em', stroke = 0, ...rest }) => (
   <IconTagFilled