lexxy 0.1.21.beta → 0.1.23.beta

data/app/assets/stylesheets/lexxy-content.css

@@ -135,7 +135,6 @@
   .code-token__property,
   .token.boolean,
   .token.constant,
-  .token.deleted,
   .token.number,
   .token.property,
   .token.symbol,
@@ -148,6 +147,7 @@
   .token.builtin,
   .token.char,
   .token.inserted,
+  .token.line,
   .token.selector,
   .token.string {
     color: var(--lexxy-color-code-token-selector);
@@ -165,9 +165,11 @@
 
   /* Operators and symbolic entities */
   .code-token__operator,
+  .token.deleted,
   .token.entity,
   .token.operator,
-  .token.url {
+  .token.url,
+  code[data-language="diff"] .code-token__operator + .code-token__selector {
     color: var(--lexxy-color-code-token-operator);
   }
 

data/app/assets/stylesheets/lexxy-editor.css

@@ -18,9 +18,11 @@
   transition: opacity 150ms;
 
   input,
-  button {
+  button,
+  summary {
     &:focus-visible {
-      outline-color: var(--lexxy-focus-ring-color);
+      outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color);
+      outline-offset: var(--lexxy-focus-ring-offset);
     }
   }
 
@@ -179,49 +181,64 @@
   }
 }
 
-/* Dialog
+/* Dropdowns
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-dialog) {
-  display: contents;
+:where(.lexxy-editor__toolbar-dropdown) {
   position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+
+  .lexxy-editor__toolbar-dropdown-content {
+    --dropdown-padding: 1ch;
+    --dropdown-gap: calc(var(--dropdown-padding) / 2);
 
-  dialog {
     background-color: var(--lexxy-color-canvas);
     border: 2px solid var(--lexxy-color-selected-hover);
     border-radius: var(--lexxy-radius);
     border-start-start-radius: 0;
     box-sizing: border-box;
     color: var(--lexxy-color-ink);
+    display: flex;
+    gap: var(--dropdown-gap);
     inset-block-start: 2lh;
-    inline-size: 100%;
-    max-inline-size: 38ch;
+    inset-inline-start: 0;
+    max-inline-size: 40ch;
     margin: 0;
-    padding: 1ch;
+    padding: var(--dropdown-padding);
     position: absolute;
     z-index: 3;
   }
 
-  &:has(dialog[open]) + .lexxy-editor__toolbar-button {
+  &:is([open]) .lexxy-editor__toolbar-button {
     background-color: var(--lexxy-color-selected-hover);
     border-end-end-radius: 0;
     border-end-start-radius: 0;
+
+    &:hover {
+      background-color: var(--lexxy-color-selected-hover);
+    }
   }
-}
+  
+  [overflowing] & {
+    position: static;
 
-:where(lexxy-toolbar[overflowing]) .lexxy-dialog dialog {
-  --dialog-padding: 0.5ch;
-  inset-inline-end: var(--dialog-padding);
-  inset-inline-start: var(--dialog-padding) !important;
-  inline-size: calc(100% - 2 * var(--dialog-padding));
-  margin: auto;
+    .lexxy-editor__toolbar-dropdown-content {
+      --dropdown-padding: 0.5ch;
+      inset-inline-end: var(--dropdown-padding);
+      inset-inline-start: var(--dropdown-padding);
+    }
+  }
 }
 
-/* Link dialog
+/* Link dropdown
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-link-dialog) {
-  .lexxy-dialog-actions {
+:where(lexxy-link-dropdown) {
+
+  > * { flex: 1; }
+
+  .lexxy-editor__toolbar-dropdown-actions {
     display: flex;
     font-size: var(--lexxy-text-small);
     flex: 1 1 0%;
@@ -242,6 +259,11 @@
     color: var(--lexxy-color-text);
     box-sizing: border-box;
     inline-size: 100%;
+    min-inline-size: 40ch;
+
+    [overflowing] & {
+      min-inline-size: 0;
+    }
   }
 
   button {
@@ -254,31 +276,31 @@
   button[type="submit"] {
     background-color: var(--lexxy-color-accent-dark);
     color: var(--lexxy-color-ink-inverted);
+
+    &:hover {
+      background-color: var(--lexxy-color-accent-medium);
+    }
   }
 }
 
-/* Color dialog
+/* Color dropdown
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-highlight-dialog) {
-  .lexxy-highlight-dialog-content {
+:where(lexxy-highlight-dropdown) {
+  display: flex;
+  flex-direction: column;
+
+  [data-button-group] {
     display: flex;
-    flex-direction: column;
-    gap: 0.75ch;
+    justify-items: flex-start;
+    flex-direction: row;
+    gap: var(--dropdown-gap);
 
-    [data-button-group] {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      gap: 0.5ch;
-    }
-  
     button {
-      block-size: 3.5ch;
-      color: var(--lexxy-color-text);
-      inline-size: 3.5ch;
-      position: relative;
-      outline: none;
+      aspect-ratio: 1 / 1;
+      inline-size: var(--button-size);
+      min-inline-size: var(--button-size);
+      max-inline-size: var(--button-size);
 
       &:after {
         align-self: center;
@@ -291,32 +313,52 @@
         inset-inline-end: 0;
         inset-inline-start: 0;
       }
+    }
+  }
 
-      &:hover {
-        opacity: 0.8;
-      }
+  button {
+    --button-size: 2lh;
 
-      &[aria-pressed="true"] {
-        box-shadow: 0 0 0 1px var(--lexxy-color-canvas), 0 0 0 3px var(--lexxy-color-accent-dark);
+    color: var(--lexxy-color-text);
+    flex: 1;
+    min-block-size: var(--button-size);
+    position: relative;
 
-        &:after {
-          content: "✓";
-        }
-      }
+    &:hover {
+      opacity: 0.8;
     }
 
-    .lexxy-highlight-dialog-reset {
-      inline-size: 100%;
+    &[aria-pressed="true"] {
+      box-shadow: 0 0 0 2px currentColor inset;
 
-      &[disabled] {
-        display: none;
+      &:after {
+        content: "✓";
       }
+    }
+  }
 
-      &:after { display: none; }
+  .lexxy-editor__toolbar-dropdown-reset[disabled] {
+    display: none;
+  }
+  
+  [overflowing] & {
+    inline-size: fit-content;
+
+    [data-button-group] {
+      flex-wrap: wrap;
+
+      button {
+        --button-size: 1.6lh;
+
+        &:after {
+          font-size: 0.9em;
+        }
+      }
     }
   }
 }
 
+
 /* Language picker
 /* -------------------------------------------------------------------------- */
 

data/app/assets/stylesheets/lexxy-variables.css

@@ -63,7 +63,7 @@
 
   /* Focus ring */
   --lexxy-focus-ring-color: var(--lexxy-color-accent-dark);
-  --lexxy-focus-ring-offset: 2px;
+  --lexxy-focus-ring-offset: 0;
   --lexxy-focus-ring-size: 2px;
 
   /* Misc */

data/lib/lexxy/engine.rb

@@ -27,8 +27,10 @@ module Lexxy
     end
 
     initializer "lexxy.assets" do |app|
-      app.config.assets.paths << root.join("app/assets/stylesheets")
-      app.config.assets.paths << root.join("app/javascript")
+      if Rails.application.config.respond_to?(:assets)
+        app.config.assets.paths << root.join("app/assets/stylesheets")
+        app.config.assets.paths << root.join("app/javascript")
+      end
     end
 
     initializer "lexxy.sanitization" do |app|

data/lib/lexxy/version.rb

@@ -1,3 +1,3 @@
 module Lexxy
-  VERSION = "0.1.21.beta"
+  VERSION = "0.1.23.beta"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lexxy
 version: !ruby/object:Gem::Version
-  version: 0.1.21.beta
+  version: 0.1.23.beta
 platform: ruby
 authors:
 - Jorge Manrubia