From c0c8354a76f7b0393e967e5b749ef440a5aa8965 Mon Sep 17 00:00:00 2001
From: Jon Staab <jstaab@protonmail.com>
Date: Mon, 27 Jul 2026 15:25:31 -0700
Subject: [PATCH] Remove dead CSS left over from the app.css split and fix
 emoji button hit target

---
 src/lib/components/ContentSearch.svelte |  6 ++----
 src/lib/components/EmojiButton.svelte   | 18 +++++++++---------
 src/lib/components/ImagesInput.svelte   |  2 +-
 src/lib/components/base.css             | 22 ----------------------
 src/lib/components/button.css           |  1 -
 src/lib/components/clay.css             |  8 ++------
 src/lib/components/menu.css             |  1 -
 src/lib/components/theme.css            |  4 ++--
 8 files changed, 16 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/ContentSearch.svelte b/src/lib/components/ContentSearch.svelte
index 6e1c09f7..3d1d9c5d 100644
--- a/src/lib/components/ContentSearch.svelte
+++ b/src/lib/components/ContentSearch.svelte
@@ -10,11 +10,9 @@
 
 <div class="content-search {props.class}">
   <div class="z-feature">
-    <div class="content-sizing">
-      {@render props.input?.()}
-    </div>
+    {@render props.input?.()}
   </div>
-  <div class="scroll-container content-sizing h-full pt-2">
+  <div class="scroll-container h-full pt-2">
     {@render props.content?.()}
   </div>
 </div>
diff --git a/src/lib/components/EmojiButton.svelte b/src/lib/components/EmojiButton.svelte
index 78ae0367..5cbdeba9 100644
--- a/src/lib/components/EmojiButton.svelte
+++ b/src/lib/components/EmojiButton.svelte
@@ -30,13 +30,13 @@
 
 <svelte:document onmousemove={onMouseMove} />
 
-<Tippy
-  bind:popover
-  class="flex {props.class}"
-  component={EmojiPicker}
-  props={{onClick}}
-  params={{trigger: "manual", interactive: true, ...tippyParams}}>
-  <Button onclick={open}>
+<Button onclick={open} class={props.class}>
+  <Tippy
+    bind:popover
+    class="flex"
+    component={EmojiPicker}
+    props={{onClick}}
+    params={{trigger: "manual", interactive: true, ...tippyParams}}>
     {@render props.children?.()}
-  </Button>
-</Tippy>
+  </Tippy>
+</Button>
diff --git a/src/lib/components/ImagesInput.svelte b/src/lib/components/ImagesInput.svelte
index e4134e84..89fe74d6 100644
--- a/src/lib/components/ImagesInput.svelte
+++ b/src/lib/components/ImagesInput.svelte
@@ -112,7 +112,7 @@
     <label
       for={id}
       class="flex aspect-square cursor-pointer items-center justify-center rounded-2xl border-2 border-dashed text-sm"
-      style:border-color={dropActive ? "var(--primary)" : "var(--line-strong)"}
+      style:border-color={dropActive ? "var(--primary)" : undefined}
       aria-label="Drag and drop images here or click to select"
       ondragenter={stopPropagation(preventDefault(onDragEnter))}
       ondragover={stopPropagation(preventDefault(onDragOver))}
diff --git a/src/lib/components/base.css b/src/lib/components/base.css
index 238ba256..f21e67b9 100644
--- a/src/lib/components/base.css
+++ b/src/lib/components/base.css
@@ -363,28 +363,6 @@ body.keyboard-open .room__compose {
   @apply underline;
 }
 
-/* date picker */
-.picker {
-  --date-picker-foreground: var(--content);
-  --date-picker-background: var(--surface-more);
-  --date-picker-highlight-border: var(--primary);
-  --date-picker-selected-color: var(--primary-content);
-  --date-picker-selected-background: var(--primary);
-}
-.date-time-field {
-  @apply bg-surface rounded-2xl px-0;
-  border: var(--border-thin) solid var(--line);
-}
-.date-time-field input {
-  height: 100% !important;
-  width: 100% !important;
-  border-radius: var(--radius-2xl) !important;
-  border: none !important;
-  background: inherit !important;
-  color: inherit !important;
-  padding: 0.7rem 1rem !important;
-}
-
 /* tippy popover */
 .tippy-target {
   @apply z-tooltip pointer-events-none fixed inset-0;
diff --git a/src/lib/components/button.css b/src/lib/components/button.css
index c9a4e263..95d5c62e 100644
--- a/src/lib/components/button.css
+++ b/src/lib/components/button.css
@@ -83,7 +83,6 @@
   /* outline */
   .button-outline {
     @apply text-content bg-transparent;
-    border-color: var(--line-strong);
 
     &:hover {
       @apply border-primary text-primary;
diff --git a/src/lib/components/clay.css b/src/lib/components/clay.css
index 2fbb13ab..6aad650e 100644
--- a/src/lib/components/clay.css
+++ b/src/lib/components/clay.css
@@ -5,7 +5,7 @@
    VITE_THEME). Every theme is selected the same way via its own data-fl-theme
    value — there is no implicit default — so VITE_THEME must be set. These are
    plain CSS variables consumed by:
-     - the component classes in common.css (var(--surface), var(--shadow-lg), …)
+     - the component classes in base.css (var(--surface), var(--shadow-lg), …)
      - the Tailwind utilities registered in base.css's @theme block
        (bg-surface, text-content-muted, text-primary, rounded-2xl, shadow-lg, …)
    Reskinning = override the same names in another theme file; no markup change.
@@ -64,7 +64,7 @@
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
   }
 
-  /* `.nav-rail` opts the primary nav into this dark palette unconditionally */
+  /* `.primary-nav` opts the primary nav into this dark palette unconditionally */
   &[data-theme="dark"],
   & .primary-nav {
     --primary: #8e80ff;
@@ -105,10 +105,6 @@
     --shadow-inset-strong: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
   }
 
-  .link-content {
-    border-radius: var(--radius-pill);
-  }
-
   .chat-editor .tiptap {
     border-color: var(--line);
   }
diff --git a/src/lib/components/menu.css b/src/lib/components/menu.css
index 5303c378..1aecbf13 100644
--- a/src/lib/components/menu.css
+++ b/src/lib/components/menu.css
@@ -15,7 +15,6 @@
 
       &:hover {
         @apply text-primary;
-        background: color-mix(in srgb, var(--subtle) 10%, transparent);
       }
     }
   }
diff --git a/src/lib/components/theme.css b/src/lib/components/theme.css
index 3fcb5168..24bb2d84 100644
--- a/src/lib/components/theme.css
+++ b/src/lib/components/theme.css
@@ -1,8 +1,8 @@
 /* ============================================================================
    Design-system entry point (imported once, in src/routes/+layout.svelte).
 
-     tailwindcss  — framework + our @theme token registration (via common.css)
-     common.css   — theme-independent structure (components, utilities, base)
+     tailwindcss  — framework + our @theme token registration (via base.css)
+     base.css     — theme-independent structure (components, utilities, base)
      clay.css     — clay theme token values ([data-fl-theme="clay"] + dark)
      flat.css     — flat theme token values ([data-fl-theme="flat"] + dark)
      navy.css     — navy theme token values ([data-fl-theme="navy"] + dark)