From 4e5a5e1523ab8251d5e02550918c3a7cba47daa7 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Fri, 30 Jan 2026 14:14:21 -0600
Subject: [PATCH] Use built-in lexxy styles and sprinkle in some overrides

---
 app/assets/stylesheets/cards.css        |  2 +-
 app/assets/stylesheets/lexxy.css        | 33 ++++++++++++++++++++++---
 app/views/layouts/shared/_head.html.erb |  3 ---
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/cards.css b/app/assets/stylesheets/cards.css
index cbaa66c91..f36b4e76f 100644
--- a/app/assets/stylesheets/cards.css
+++ b/app/assets/stylesheets/cards.css
@@ -229,7 +229,7 @@
     }
 
     lexxy-toolbar {
-      border-block-start: 1px solid var(--color-ink-light);
+      border-block-start: 1px solid var(--lexxy-border-color);
     }
 
     & ~ .btn.btn--reversed {
diff --git a/app/assets/stylesheets/lexxy.css b/app/assets/stylesheets/lexxy.css
index 3959424f9..316d9e4c0 100644
--- a/app/assets/stylesheets/lexxy.css
+++ b/app/assets/stylesheets/lexxy.css
@@ -1,7 +1,34 @@
-@layer components {
-  /* Editor
-  /* ------------------------------------------------------------------------ */
+@import url("lexxy-variables.css") layer(base);
+@import url("lexxy-content.css") layer(base);
+@import url("lexxy-editor.css") layer(base);
 
+@layer components {
   lexxy-editor {
+    --lexxy-border-color: oklch(var(--lch-ink-darkest) / 20%);
+    --lexxy-editor-padding: 0;
+    --lexxy-toolbar-button-size: 2rem;
+    --lexxy-toolbar-gap: 0;
+
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+  }
+
+  lexxy-toolbar {
+    border-color: var(--lexxy-border-color);
+  }
+
+  .lexxy-editor__toolbar-button {
+    background: transparent;
+
+    @media(any-hover: hover) {
+      &:hover {
+        background-color: color-mix(in srgb, transparent, var(--color-ink) 10%);
+      }
+    }
+  }
+
+  .lexxy-editor__content {
+    margin-block-start: 0.5lh;
   }
 }
diff --git a/app/views/layouts/shared/_head.html.erb b/app/views/layouts/shared/_head.html.erb
index aad07a44d..4be536454 100644
--- a/app/views/layouts/shared/_head.html.erb
+++ b/app/views/layouts/shared/_head.html.erb
@@ -16,9 +16,6 @@
   <% turbo_refreshes_with method: :morph, scroll: :preserve %>
 
   <%= render "layouts/theme_preference" %>
-  <%= stylesheet_link_tag "lexxy-variables" %>
-  <%= stylesheet_link_tag "lexxy-content" %>
-  <%= stylesheet_link_tag "lexxy-editor" %>
   <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
   <%= stylesheet_link_tag "fizzy/saas", "data-turbo-track": "reload" if Fizzy.saas? %>
   <%= javascript_importmap_tags %>