Merge pull request #377 from basecamp/dark-mode

Author: jorgemanrubia

README.md

@@ -87,7 +87,11 @@ For the CSS, you can include it with the standard Rails helper:
 <%= stylesheet_link_tag "lexxy" %>
 ```
 
-Of course, you can copy the CSS to your project and adapt it to your needs.
+You can copy the CSS to your project and adapt it to your needs.
+
+#### Custom styles and dark mode
+
+All of Lexxy's color styles are defiend as CSS variables in `app/stylesheets/lexxy-variables.css`. This enables a straightforward way to customize Lexxy to match your application's theme. You can see an example implementation of a custom dark mode style in the Sandbox's stylesheet at `test/dummy/app/assets/stylesheets/sandbox.css`.
 
 #### Rendered Action Text content
 

app/assets/javascript/lexxy.js.gz

@@ -64,6 +64,10 @@
     display: none;
   }
 
+  a {
+    color: var(--lexxy-color-link);
+  }
+
   img,
   video,
   embed,
@@ -208,7 +212,8 @@
   font-size: var(--lexxy-text-small);
 
   input {
-    color: inherit;
+    background: var(--lexxy-color-canvas);
+    color: var(--lexxy-color-text);
     border: none;
     inline-size: 100%;
     max-inline-size: 100%;

app/assets/javascript/lexxy.min.js.gz

@@ -11,6 +11,7 @@
 
   border: 1px solid var(--lexxy-color-ink-lighter);
   border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
+  background-color: var(--lexxy-color-canvas);
   display: block;
   overflow: visible;
   position: relative;
@@ -36,7 +37,7 @@
 
     @media(any-hover: hover) {
       &:hover {
-        filter: brightness(0.9);
+        background: var(--lexxy-color-ink-lightest);
       }
     }
   }
@@ -102,12 +103,13 @@
   display: grid;
   place-items: center;
 
-  &:is(:active) {
-    background-color: var(--lexxy-color-selected);
-  }
-
+  &:is(:active),
   &[aria-pressed="true"] {
     background-color: var(--lexxy-color-selected);
+
+    &:hover {
+      background-color: var(--lexxy-color-selected-hover);
+    }
   }
 
   svg {
@@ -133,7 +135,7 @@
     }
 
     [open] & {
-      filter: brightness(0.9);
+      background-color: var(--lexxy-color-ink-lightest);
     }
   }
 }
@@ -180,13 +182,16 @@
   }
 
   input[type="url"] {
+    background-color: var(--lexxy-color-canvas);
     border: 1px solid var(--lexxy-color-ink-lighter);
     border-radius: var(--lexxy-radius);
+    color: var(--lexxy-color-text);
     min-inline-size: 30ch;
   }
 
   button {
     background-color: var(--lexxy-color-ink-lightest);
+    color: var(--lexxy-color-text);
     inline-size: 100%;
     justify-content: center;
   }

app/assets/stylesheets/lexxy-content.css

@@ -8,7 +8,8 @@
   --lexxy-color-ink-inverted: white;
 
   --lexxy-color-accent-dark: oklch(57% 0.19 260);
-  --lexxy-color-accent-medium: oklch(66% 0.196 258);
+  --lexxy-color-accent-medium: oklch(75% 0.196 258);
+  --lexxy-color-accent-light: oklch(88% 0.026 254);
   --lexxy-color-accent-lightest: oklch(92% 0.026 254);
 
   --lexxy-color-red: oklch(60% 0.15 27);
@@ -30,7 +31,8 @@
   --lexxy-color-text-subtle: var(--lexxy-color-ink-medium);
   --lexxy-color-link: var(--lexxy-color-accent-dark);
   --lexxy-color-selected: var(--lexxy-color-accent-lightest);
-  --lexxy-color-selected-dark: var(--lexxy-color-blue-medium);
+  --lexxy-color-selected-hover: var(--lexxy-color-accent-light);
+  --lexxy-color-selected-dark: var(--lexxy-color-blue);
   --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
 
   /* Typography */
@@ -48,4 +50,4 @@
   --lexxy-radius: 0.5ch;
   --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --lexxy-z-popup: 1000;
-}
+}

app/assets/stylesheets/lexxy-editor.css

@@ -1,8 +1,52 @@
+:root {
+  --sandbox-background-color: oklch(98% 0 0);
+  --sandbox-text-color: oklch(20% 0 0);
+  --sandbox-code-color: #2d3748;
+
+  /* Dark mode colors */
+  @media (prefers-color-scheme: dark) {
+    --sandbox-background-color: oklch(15% 0 0);
+    --sandbox-text-color: oklch(96% 0 0);
+    --sandbox-code-color: #f7fafc;
+  
+    /* Lexxy dark mode colors */
+    --lexxy-color-ink: oklch(96% 0 0);
+    --lexxy-color-ink-medium: oklch(75% 0 0);
+    --lexxy-color-ink-light: oklch(55% 0 0);
+    --lexxy-color-ink-lighter: oklch(40% 0 0);
+    --lexxy-color-ink-lightest: oklch(25% 0 0);
+    --lexxy-color-ink-inverted: oklch(15% 0 0);
+
+    --lexxy-color-accent-dark: oklch(70% 0.30 260);
+    --lexxy-color-accent-medium: oklch(75% 0.196 258);
+    --lexxy-color-accent-light: oklch(45% 0.04 254);
+    --lexxy-color-accent-lightest: oklch(35% 0.04 254);
+
+    --lexxy-color-red: oklch(70% 0.15 27);
+    --lexxy-color-green: oklch(70% 0.15 145);
+    --lexxy-color-blue: oklch(75% 0.196 258);
+    --lexxy-color-purple: oklch(70% 0.15 305);
+
+    --lexxy-color-code-token-att: #ff7b72;
+    --lexxy-color-code-token-comment: #8b949e;
+    --lexxy-color-code-token-function: #d2a8ff;
+    --lexxy-color-code-token-operator: #ff7b72;
+    --lexxy-color-code-token-property: #79c0ff;
+    --lexxy-color-code-token-punctuation: #f0f6fc;
+    --lexxy-color-code-token-selector: #7ee787;
+    --lexxy-color-code-token-variable: #ffa657;
+
+    --lexxy-shadow: 0 0 0 1px rgba(100, 100, 100, 0.3);
+  }
+}
+
 html {
   font-size: 16px;
 }
 
 body {
+  background-color: var(--sandbox-background-color);
+  color: var(--sandbox-text-color);
   margin: 0;
   padding: 0;
 }
@@ -23,12 +67,11 @@ section {
   padding: var(--sandbox-padding);
 
   &:first-child {
-    box-shadow: 1px 0 2px oklch(95% 0 0);
     position: relative;
   }
 
   &:last-child {
-    background: oklch(98% 0 0);
+    background: rgba(100, 100, 100, 0.1);
     overflow: hidden;
   }
 }
@@ -55,7 +98,7 @@ h2 {
 
 pre[class*="language-"],
 code[class*="language-"] {
-  color: #2d3748;
+  color: var(--sandbox-code-color);
   background: none;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
   font-size: 0.9rem;

app/assets/stylesheets/lexxy-variables.css

@@ -6,6 +6,10 @@ import htmlParser from "prettier/parser-html"
 export default class extends Controller {
   static targets = [ "editor", "output" ]
 
+  connect() {
+    this.refresh()
+  }
+
   async refresh(event) {
     const code = this.editorTarget.value.trim()
     let formattedCode = await prettier.format(code, {

test/dummy/app/assets/stylesheets/sandbox.css

@@ -18,10 +18,11 @@
     <link rel="apple-touch-icon" href="/icon.png">
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
-    <%= stylesheet_link_tag :app %>
-
+    
     <%= stylesheet_link_tag "lexxy" %>
 
+    <%= stylesheet_link_tag :app %>
+
     <%= javascript_importmap_tags %>
   </head>
 

test/dummy/app/javascript/controllers/lexxy_output_controller.js

@@ -1,10 +1,10 @@
-<% content_for :title, "Sandbox" %>
+<% content_for :title, "Lexxy Sandbox" %>
 
 <main data-controller="lexxy-output" data-action="lexxy:change->lexxy-output#refresh">
   <section>
     <h2>Editor</h2>
     <div>
-      <%= rich_text_area_tag :sandbox, nil, placeholder: "Write something...", data: { lexxy_output_target: "editor" } do %>
+      <%= rich_text_area_tag :sandbox, nil, value: "<h3>Lexxy</h3><p>Introducing <a href=\"https://github.com/basecamp/lexxy\">Lexxy</a>, a modern rich text editor for Rails</p><pre data-language=\"html\" data-highlight-language=\"html\">&lt;lexxy-editor placeholder=\"It all starts here...\"&gt;\n&lt;/lexxy-editor&gt;</pre><h4>Features</h4><ul><li>Built on top of Lexical, the powerful text editor framework from Meta.</li><li>Good HTML semantics. Paragraphs are real <code>&lt;p&gt;</code> tags, as they should be.</li><li>Markdown support: shortcuts, auto-formatting on paste.</li><li>Real-time code syntax highlighting.</li><li>Create links by pasting URLs on selected text.</li><li>Configurable prompts. Support for mentions and other interactive prompts with multiple loading and filtering strategies.</li><li>Preview attachments like PDFs and Videos in the editor.</li><li>Works seamlessly with Action Text, generating the same canonical HTML format it expects for attachments.</li></ul>", placeholder: "Write something...", data: { lexxy_output_target: "editor" } do %>
         <lexxy-prompt trigger="@" src="<%= people_path %>" name="mention"></lexxy-prompt>
       <% end %>
     </div>