Update lexxy to latest

Color highlighter, more code languages...

Gemfile.lock

@@ -237,7 +237,7 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    lexxy (0.1.20.beta)
+    lexxy (0.1.22.beta)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)

app/assets/stylesheets/_global.css

@@ -219,6 +219,27 @@
   --color-card-7: oklch(var(--lch-purple-medium));
   --color-card-8: oklch(var(--lch-pink-medium));
 
+  /* Colors: Highlighter */
+  --highlight-1: rgb(136, 118, 38);
+  --highlight-2: rgb(185, 94, 6);
+  --highlight-3: rgb(207, 0, 0);
+  --highlight-4: rgb(216, 28, 170);
+  --highlight-5: rgb(144, 19, 254);
+  --highlight-6: rgb(5, 98, 185);
+  --highlight-7: rgb(17, 138, 15);
+  --highlight-8: rgb(148, 82, 22);
+  --highlight-9: rgb(102, 102, 102);
+
+  --highlight-bg-1: rgba(229, 223, 6, 0.3);
+  --highlight-bg-2: rgba(255, 185, 87, 0.3);
+  --highlight-bg-3: rgba(255, 118, 118, 0.3);
+  --highlight-bg-4: rgba(248, 137, 216, 0.3);
+  --highlight-bg-5: rgba(190, 165, 255, 0.3);
+  --highlight-bg-6: rgba(124, 192, 252, 0.3);
+  --highlight-bg-7: rgba(140, 255, 129, 0.3);
+  --highlight-bg-8: rgba(221, 170, 123, 0.3);
+  --highlight-bg-9: rgba(200, 200, 200, 0.3);
+
   /* Colors: Syntax highlighting */
   --color-code-token__att: oklch(var(--lch-blue-dark));
   --color-code-token__comment: oklch(var(--lch-ink-medium));

app/assets/stylesheets/lexxy.css

@@ -167,6 +167,71 @@
     flex: 1;
   }
 
+  :where(.lexxy-highlight-dialog) {
+    .lexxy-highlight-dialog-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75ch;
+
+      [data-button-group] {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.5ch;
+      }
+
+      button {
+        appearance: none;
+        background: var(--color-canvas);
+        block-size: 3.5ch;
+        border: none;
+        border-radius: 0.5ch;
+        color: var(--color-ink);
+        cursor: pointer;
+        display: grid;
+        font-size: inherit;
+        inline-size: 3.5ch;
+        place-items: center;
+        position: relative;
+        outline: none;
+
+        &:after {
+          align-self: center;
+          content: "Aa";
+          display: inline-block;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          position: absolute;
+          inset-block-start: 0;
+          inset-block-end: 0;
+          inset-inline-end: 0;
+          inset-inline-start: 0;
+        }
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &[aria-pressed="true"] {
+          box-shadow: 0 0 0 1px var(--color-canvas), 0 0 0 3px var(--color-link);
+
+          &:after {
+            content: "✓";
+          }
+        }
+      }
+
+      .lexxy-highlight-dialog-reset {
+        inline-size: 100%;
+
+        &[disabled] {
+          display: none;
+        }
+
+        &:after { display: none; }
+      }
+    }
+  }
+
   /* Based on .input, .input--select */
   .lexxy-code-language-picker {
     -webkit-appearance: none;

app/assets/stylesheets/rich-text-content.css

@@ -40,6 +40,10 @@
       text-decoration: line-through;
     }
 
+    :where(mark, .lexxy-content__highlight) {
+      background-color: transparent;
+      color: inherit;
+    }
 
     :where(p, blockquote) {
       letter-spacing: -0.005ch;