Update to Pierre Soft themes

apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import {
   type WorkerInitializationRenderOptions,
   WorkerPoolContextProvider,
@@ -45,8 +46,13 @@ const PoolOptions: WorkerPoolOptions = {
   },
 };
 
+const SITE = process.env.NEXT_PUBLIC_SITE;
+
 const HighlighterOptions: WorkerInitializationRenderOptions = {
-  theme: { dark: 'pierre-dark', light: 'pierre-light' },
+  theme:
+    SITE === 'diffshub'
+      ? { dark: 'pierre-dark-soft', light: 'pierre-light-soft' }
+      : DEFAULT_THEMES,
   langs: [
     'cpp',
     'css',

apps/docs/app/(diffs)/_examples/ShikiThemes/ShikiThemes.tsx

@@ -25,6 +25,7 @@ import {
 
 const LIGHT_THEMES = [
   'pierre-light',
+  'pierre-light-soft',
   'catppuccin-latte',
   'everforest-light',
   'github-light',
@@ -47,6 +48,7 @@ const LIGHT_THEMES = [
 
 const DARK_THEMES = [
   'pierre-dark',
+  'pierre-dark-soft',
   'andromeeda',
   'aurora-x',
   'ayu-dark',

apps/docs/app/(diffs)/playground/PlaygroundClient.tsx

@@ -47,6 +47,7 @@ import { Switch } from '@/components/ui/switch';
 
 const LIGHT_THEMES = [
   'pierre-light',
+  'pierre-light-soft',
   'catppuccin-latte',
   'github-light',
   'one-light',
@@ -55,6 +56,7 @@ const LIGHT_THEMES = [
 
 const DARK_THEMES = [
   'pierre-dark',
+  'pierre-dark-soft',
   'catppuccin-mocha',
   'dracula',
   'github-dark',

apps/docs/app/(diffs)/theme/ThemeDemo.tsx

@@ -17,7 +17,12 @@ import { cn } from '@/lib/utils';
 
 // Preload themes at module level for earliest possible start
 void preloadHighlighter({
-  themes: ['pierre-dark', 'pierre-light'],
+  themes: [
+    'pierre-dark',
+    'pierre-dark-soft',
+    'pierre-light',
+    'pierre-light-soft',
+  ],
   langs: ['tsx', 'html', 'css'],
 });
 

apps/docs/app/(diffs)/theme/gallery/page.tsx

@@ -65,7 +65,9 @@ const SAMPLE_NEW_FILE = {
 const THEMES = [
   // Pierre
   'pierre-light',
+  'pierre-light-soft',
   'pierre-dark',
+  'pierre-dark-soft',
 
   // GitHub
   'github-light',

apps/docs/app/(diffshub)/(view)/_components/CodeViewCommentsList.tsx

@@ -66,7 +66,7 @@ export const CodeViewCommentsList = memo(function CodeViewCommentsList({
               <button
                 key={comment.key}
                 type="button"
-                className="focus-visible:ring-ring hover:bg-muted bg-card flex w-full cursor-pointer items-start gap-2 border-b border-[rgb(0_0_0_/_0.1)] p-3 text-left text-sm transition-colors outline-none first:rounded-t-lg last:rounded-b-lg last:border-b-0 focus-visible:ring-2 dark:border-[rgb(255_255_255_/_0.15)] dark:bg-neutral-800 dark:hover:bg-neutral-900"
+                className="focus-visible:ring-ring hover:bg-muted bg-card flex w-full cursor-pointer items-start gap-2 border-b border-[rgb(0_0_0_/_0.1)] p-3 text-left text-sm transition-colors outline-none first:rounded-t-lg last:rounded-b-lg last:border-b-0 focus-visible:ring-2 dark:border-[rgb(255_255_255_/_0.15)] dark:bg-neutral-800 dark:hover:bg-[var(--diffshub-sidebar-bg)]"
                 onClick={() => onSelectComment?.(comment)}
               >
                 <CommentAuthorAvatar seed={comment.author} className="size-5" />

apps/docs/app/(diffshub)/(view)/_components/CodeViewFileTree.tsx

@@ -1,12 +1,22 @@
 'use client';
 
 import { useStableCallback } from '@pierre/diffs/react';
+import darkSoftTheme from '@pierre/theme/pierre-dark-soft';
+import lightSoftTheme from '@pierre/theme/pierre-light-soft';
 import type {
   FileTreeBatchOperation,
   FileTree as FileTreeModel,
 } from '@pierre/trees';
+import { themeToTreeStyles } from '@pierre/trees';
 import { FileTree, useFileTree } from '@pierre/trees/react';
-import { type CSSProperties, memo, useEffect, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import type { FileTreePublicId } from '../../../../../../packages/trees/dist/model/publicTypes';
 import {
@@ -15,7 +25,14 @@ import {
   getInitialBatchSize,
 } from './constants';
 import type { CodeViewFileTreeSource } from './types';
+import { useTheme } from '@/components/theme-provider';
+
+// Computed once at module level so they're never re-derived on every render.
+const LIGHT_SOFT_TREE_STYLES = themeToTreeStyles(lightSoftTheme);
+const DARK_SOFT_TREE_STYLES = themeToTreeStyles(darkSoftTheme);
 
+// These override vars take precedence over the --trees-theme-* vars set by
+// themeToTreeStyles, so diffshub-specific layout tweaks are always preserved.
 const DENSITY_OVERRIDE_STYLES = {
   '--trees-bg-override': 'var(--diffshub-sidebar-bg)',
   '--trees-density-override': 0.8,
@@ -40,6 +57,16 @@ export const CodeViewFileTree = memo(function CodeViewFileTree({
   onSelectItem,
   source,
 }: CodeViewFileTreeProps) {
+  const { resolvedTheme } = useTheme();
+  const themeStyles = useMemo(
+    () => ({
+      ...(resolvedTheme === 'dark'
+        ? DARK_SOFT_TREE_STYLES
+        : LIGHT_SOFT_TREE_STYLES),
+      ...DENSITY_OVERRIDE_STYLES,
+    }),
+    [resolvedTheme]
+  );
   const sourceRef = useRef(source);
   const previousSourceRef = useRef(source);
   const [initialVisibleRowCount] = useState(getInitialBatchSize);
@@ -126,7 +153,7 @@ export const CodeViewFileTree = memo(function CodeViewFileTree({
     <FileTree
       className="h-full min-h-0 overflow-auto overscroll-contain md:ml-3"
       model={model}
-      style={DENSITY_OVERRIDE_STYLES}
+      style={themeStyles}
     />
   );
 });

apps/docs/app/(diffshub)/(view)/_components/CodeViewHeader.tsx

@@ -65,7 +65,7 @@ export const CodeViewHeader = memo(function CodeViewHeader({
   return (
     <div
       className={cn(
-        'z-10 contain-layout contain-paint flex flex-wrap md:flex-nowrap items-center gap-2.5 pt-3 pb-2 px-4 md:px-3 md:py-1.5 border-b border-[var(--color-border-opaque)] bg-background md:bg-neutral-50 md:dark:bg-neutral-900',
+        'z-10 contain-layout contain-paint flex flex-wrap md:flex-nowrap items-center gap-2.5 pt-3 pb-2 px-4 md:px-3 md:py-1.5 border-b border-[var(--color-border-opaque)] bg-background md:bg-[var(--diffshub-sidebar-bg)]',
         className
       )}
     >

apps/docs/app/(diffshub)/(view)/_components/CodeViewSidebar.tsx

@@ -220,7 +220,7 @@ function SidebarWrapper({
     <div
       className={cn(
         className,
-        'bg-neutral-50 dark:bg-neutral-900 contain-strict z-30 flex h-full min-h-0 flex-col transition-transform duration-200 ease-out will-change-transform motion-reduce:transition-none md:z-auto md:translate-y-0 md:will-change-auto',
+        'bg-[var(--diffshub-sidebar-bg)] contain-strict z-30 flex h-full min-h-0 flex-col transition-transform duration-200 ease-out will-change-transform motion-reduce:transition-none md:z-auto md:translate-y-0 md:will-change-auto',
         mobileOverlayOpen
           ? 'pointer-events-auto translate-y-0 overflow-hidden rounded-t-xl shadow-[0_0_0_1px_var(--color-border-opaque),_0_16px_32px_rgb(0_0_0_/0.25)] md:h-full md:overflow-visible md:rounded-none md:border-0 md:shadow-none'
           : 'pointer-events-none translate-y-[calc(100%+1.5rem)] overflow-hidden rounded-xl md:pointer-events-auto md:h-full md:overflow-visible md:rounded-none pt-3 border-r border-[var(--color-border-opaque)]'

apps/docs/app/(diffshub)/(view)/_components/CodeViewWrapper.tsx

@@ -4,7 +4,6 @@ import {
   type CodeViewItem,
   type CodeViewLineSelection,
   type CodeViewOptions,
-  DEFAULT_THEMES,
   type DiffIndicators,
   type DiffLineAnnotation,
   type LineAnnotation,
@@ -412,7 +411,7 @@ export const CodeViewWrapper = memo(function CodeViewWrapper({
         // Use this to validate itemMetrics when changing layout with unsafeCSS.
         // __devOnlyValidateItemHeights: true,
         layout: CODE_VIEW_LAYOUT,
-        theme: DEFAULT_THEMES,
+        theme: { dark: 'pierre-dark-soft', light: 'pierre-light-soft' },
         diffStyle,
         diffIndicators,
         overflow,

apps/docs/app/(diffshub)/_home/Home.tsx

@@ -65,15 +65,16 @@ const SOCIAL_LINKS = [
 
 export default function DiffshubHome() {
   return (
-    <div className="flex min-h-screen min-w-screen flex-col items-center justify-center md:bg-neutral-50 md:py-12 md:dark:bg-neutral-900">
+    <div className="flex min-h-screen min-w-screen flex-col items-center justify-center md:bg-[var(--diffshub-sidebar-bg)] md:py-12">
       <section className="relative flex min-h-[100dvh] w-2xl max-w-[100vw] flex-col justify-center space-y-4 px-6 pt-8 md:block md:min-h-0">
         <h2 className="flex items-center gap-1.5 text-2xl font-semibold tracking-tight">
           <DiffsHubLogo />
           DiffsHub
         </h2>
         <p className="text-muted-foreground text-pretty">
           View code changes from any public GitHub diff or patch URL with a
-          super-freaking-fast, beautiful, and virtualized interface. Built by{' '}
+          super-freaking-fast, beautiful, and virtualized interface by replacing{' '}
+          <code>github.com</code> with <code>diffshub.com</code>. Built by{' '}
           <Link
             href="https://pierre.computer"
             target="_blank"
@@ -82,35 +83,7 @@ export default function DiffshubHome() {
           >
             The Pierre Computer Company
           </Link>{' '}
-          using{' '}
-          <Link
-            href="https://diffs.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-link group no-underline"
-          >
-            <code className="text-foreground/75">
-              @
-              <code className="decoration-muted-foreground group-hover:decoration-foreground group-transition-all underline decoration-[1px] underline-offset-3">
-                pierre/diffs
-              </code>
-            </code>
-          </Link>{' '}
-          and{' '}
-          <Link
-            href="https://trees.software"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-link no-underline"
-          >
-            <code className="text-foreground/75">
-              @
-              <code className="decoration-muted-foreground group-hover:decoration-foreground group-transition-all underline decoration-[1px] underline-offset-3">
-                pierre/trees
-              </code>
-            </code>
-          </Link>
-          .
+          using the new CodeView component.
         </p>
         <HomeFetchForm />
         <div className="mb-5 space-y-2">

apps/docs/app/(trees)/_components/DemoThemingClient.tsx

@@ -39,6 +39,7 @@ import { PRODUCTS } from '@/lib/product-config';
 
 const LIGHT_THEMES = [
   'pierre-light',
+  'pierre-light-soft',
   'catppuccin-latte',
   'everforest-light',
   'github-light',
@@ -61,6 +62,7 @@ const LIGHT_THEMES = [
 
 const DARK_THEMES = [
   'pierre-dark',
+  'pierre-dark-soft',
   'andromeeda',
   'aurora-x',
   'ayu-dark',

apps/docs/app/globals.css

@@ -84,7 +84,7 @@
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
 
-  --diffshub-sidebar-bg: light-dark(oklch(98.5% 0 0), oklch(20.5% 0 0));
+  --diffshub-sidebar-bg: #f7f7f7;
 
   color-scheme: light;
 }
@@ -127,6 +127,7 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  --diffshub-sidebar-bg: #101010;
   color-scheme: dark;
 }
 

apps/docs/components/PreloadHighlighter.tsx

@@ -5,7 +5,12 @@ import { useEffect } from 'react';
 export function PreloadHighlighter() {
   useEffect(() => {
     void preloadHighlighter({
-      themes: ['pierre-dark', 'pierre-light'],
+      themes: [
+        'pierre-dark',
+        'pierre-dark-soft',
+        'pierre-light',
+        'pierre-light-soft',
+      ],
       langs: ['zig', 'rust', 'typescript', 'tsx', 'bash'],
       preferredHighlighter: 'shiki-wasm',
     });

apps/docs/package.json

@@ -29,6 +29,7 @@
     "@icons-pack/react-simple-icons": "catalog:",
     "@pierre/diffs": "workspace:*",
     "@pierre/icons": "catalog:",
+    "@pierre/theme": "catalog:",
     "@pierre/tree-test-data": "workspace:*",
     "@pierre/trees": "workspace:*",
     "@pierre/truncate": "workspace:*",

package.json

@@ -15,7 +15,7 @@
       "@octokit/rest": "22.0.0",
       "@pierre/icons": "0.5.0",
       "@pierre/storage": "0.0.10",
-      "@pierre/theme": "0.0.28",
+      "@pierre/theme": "1.0.3",
       "@pierre/vscode-icons": "0.0.9",
       "@playwright/test": "1.51.1",
       "@radix-ui/react-avatar": "1.1.10",

packages/diffs/src/highlighter/shared_highlighter.ts

@@ -132,7 +132,17 @@ registerCustomTheme('pierre-dark', async () => {
   return { ...theme, name: 'pierre-dark' } as ThemeRegistrationResolved;
 });
 
+registerCustomTheme('pierre-dark-soft', async () => {
+  const { default: theme } = await import('@pierre/theme/pierre-dark-soft');
+  return { ...theme, name: 'pierre-dark-soft' } as ThemeRegistrationResolved;
+});
+
 registerCustomTheme('pierre-light', async () => {
   const { default: theme } = await import('@pierre/theme/pierre-light');
   return { ...theme, name: 'pierre-light' } as ThemeRegistrationResolved;
 });
+
+registerCustomTheme('pierre-light-soft', async () => {
+  const { default: theme } = await import('@pierre/theme/pierre-light-soft');
+  return { ...theme, name: 'pierre-light-soft' } as ThemeRegistrationResolved;
+});

packages/diffs/src/types.ts

@@ -52,7 +52,9 @@ export type {
 export type DiffsThemeNames =
   | BundledTheme
   | 'pierre-dark'
+  | 'pierre-dark-soft'
   | 'pierre-light'
+  | 'pierre-light-soft'
   | (string & {});
 
 export type ThemesType = Record<'dark' | 'light', DiffsThemeNames>;