@byline/richtext-lexical 6.10.0 → 6.11.0

package/src/field/extensions/floating-text-format/index.css

@@ -1,148 +1,164 @@
-.floating-text-format-popup {
-  display: flex;
-  background: #fff;
-  padding: 4px;
-  vertical-align: middle;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  opacity: 0;
-  background-color: #fff;
-  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-  transition: opacity 0.5s;
-  height: 35px;
-  will-change: transform;
-}
-
-.floating-text-format-popup button.popup-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 6px;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.floating-text-format-popup button.popup-item:disabled {
-  cursor: not-allowed;
-}
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
+@layer byline-components.cms {
+  .floating-text-format-popup {
+    display: flex;
+    background: #fff;
+    padding: 4px;
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    opacity: 0;
+    background-color: #fff;
+    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    transition: opacity 0.5s;
+    height: 35px;
+    will-change: transform;
+  }
 
-.floating-text-format-popup button.popup-item.spaced {
-  margin-right: 2px;
-}
+  .floating-text-format-popup button.popup-item {
+    border: 0;
+    display: flex;
+    background: none;
+    border-radius: 6px;
+    cursor: pointer;
+    vertical-align: middle;
+  }
 
-.floating-text-format-popup button.popup-item i.format {
-  background-size: contain;
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-  margin-top: 3px;
-  vertical-align: -0.25em;
-  opacity: 0.6;
-}
+  .floating-text-format-popup button.popup-item:disabled {
+    cursor: not-allowed;
+  }
 
-.floating-text-format-popup button.popup-item:disabled i.format {
-  opacity: 0.2;
-}
+  .floating-text-format-popup button.popup-item.spaced {
+    margin-right: 2px;
+  }
 
-.floating-text-format-popup button.popup-item.active {
-  background-color: rgba(223, 232, 250, 0.3);
-}
+  .floating-text-format-popup button.popup-item i.format {
+    background-size: contain;
+    display: inline-block;
+    height: 18px;
+    width: 18px;
+    margin-top: 3px;
+    vertical-align: -0.25em;
+    opacity: 0.6;
+  }
 
-.floating-text-format-popup button.popup-item.active i {
-  opacity: 1;
-}
+  .floating-text-format-popup button.popup-item:disabled i.format {
+    opacity: 0.2;
+  }
 
-.floating-text-format-popup .popup-item:hover:not([disabled]) {
-  background-color: #eee;
-}
+  .floating-text-format-popup button.popup-item.active {
+    background-color: rgba(223, 232, 250, 0.3);
+  }
 
-.floating-text-format-popup select.popup-item {
-  border: 0;
-  display: flex;
-  background: none;
-  border-radius: 6px;
-  padding: 8px;
-  vertical-align: middle;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 70px;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-}
+  .floating-text-format-popup button.popup-item.active i {
+    opacity: 1;
+  }
 
-.floating-text-format-popup select.code-language {
-  text-transform: capitalize;
-  width: 130px;
-}
+  .floating-text-format-popup .popup-item:hover:not([disabled]) {
+    background-color: #eee;
+  }
 
-.floating-text-format-popup .popup-item .text {
-  display: flex;
-  line-height: 20px;
-  width: 200px;
-  vertical-align: middle;
-  font-size: 14px;
-  color: #777;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  height: 20px;
-  text-align: left;
-}
+  .floating-text-format-popup select.popup-item {
+    border: 0;
+    display: flex;
+    background: none;
+    border-radius: 6px;
+    padding: 8px;
+    vertical-align: middle;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 70px;
+    font-size: 14px;
+    color: #777;
+    text-overflow: ellipsis;
+  }
 
-.floating-text-format-popup .popup-item .icon {
-  display: flex;
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  margin-right: 8px;
-  line-height: 16px;
-  background-size: contain;
-}
+  .floating-text-format-popup select.code-language {
+    text-transform: capitalize;
+    width: 130px;
+  }
 
-.floating-text-format-popup i.chevron-down {
-  margin-top: 3px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  user-select: none;
-}
+  .floating-text-format-popup .popup-item .text {
+    display: flex;
+    line-height: 20px;
+    width: 200px;
+    vertical-align: middle;
+    font-size: 14px;
+    color: #777;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height: 20px;
+    text-align: left;
+  }
 
-.floating-text-format-popup i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
-}
+  .floating-text-format-popup .popup-item .icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    user-select: none;
+    margin-right: 8px;
+    line-height: 16px;
+    background-size: contain;
+  }
 
-.floating-text-format-popup .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
-}
+  .floating-text-format-popup i.chevron-down {
+    margin-top: 3px;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    user-select: none;
+  }
 
-@media (max-width: 1024px) {
-  .floating-text-format-popup button.insert-comment {
-    display: none;
+  .floating-text-format-popup i.chevron-down.inside {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    margin-left: -25px;
+    margin-top: 11px;
+    margin-right: 10px;
+    pointer-events: none;
   }
-}
 
-.dark {
-  .floating-text-format-popup {
-    background-color: var(--canvas-800);
-    border: 1px solid var(--border-color);
+  .floating-text-format-popup .divider {
+    width: 1px;
+    background-color: #eee;
+    margin: 0 4px;
   }
 
-  .floating-text-format-popup i {
-    filter: invert(1);
+  @media (max-width: 1024px) {
+    .floating-text-format-popup button.insert-comment {
+      display: none;
+    }
   }
 
-  .floating-text-format-popup .popup-item:hover:not([disabled]) {
-    background-color: #1c1c1c;
+  .dark {
+    .floating-text-format-popup {
+      background-color: var(--canvas-800);
+      border: 1px solid var(--border-color);
+    }
+
+    .floating-text-format-popup i {
+      filter: invert(1);
+    }
+
+    .floating-text-format-popup .popup-item:hover:not([disabled]) {
+      background-color: #1c1c1c;
+    }
   }
 }

package/src/field/extensions/inline-image/inline-image-modal.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * Inline image modal — image picker row.
  *
@@ -6,154 +20,156 @@
  * components. Colours use the design tokens so the row is theme-aware.
  */
 
-.inline-image-modal-picker {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.inline-image-modal-thumb,
-.inline-image-modal-thumb-placeholder {
-  flex-shrink: 0;
-  width: 8rem;
-  height: 8rem;
-  border-radius: 0.25rem;
-  border: 1px solid var(--border-color);
-}
+@layer byline-components.cms {
+  .inline-image-modal-picker {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
 
-.inline-image-modal-thumb {
-  object-fit: cover;
-}
+  .inline-image-modal-thumb,
+  .inline-image-modal-thumb-placeholder {
+    flex-shrink: 0;
+    width: 8rem;
+    height: 8rem;
+    border-radius: 0.25rem;
+    border: 1px solid var(--border-color);
+  }
 
-.inline-image-modal-thumb-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--surface-subtle);
-  color: var(--text-subtle);
-  font-size: 0.75rem;
-}
+  .inline-image-modal-thumb {
+    object-fit: cover;
+  }
 
-.inline-image-modal-picker-details {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
+  .inline-image-modal-thumb-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--surface-subtle);
+    color: var(--text-subtle);
+    font-size: 0.75rem;
+  }
 
-.inline-image-modal-change-btn {
-  flex-shrink: 0;
-  min-width: 70px;
-}
+  .inline-image-modal-picker-details {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
 
-.inline-image-modal-title {
-  align-self: stretch;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: 0.875rem;
-  color: var(--text-subtle);
-}
+  .inline-image-modal-change-btn {
+    flex-shrink: 0;
+    min-width: 70px;
+  }
 
-/**
- * Tab strip — matched to the admin document editor's tabs.
- *
- * The shared `@byline/ui` Tabs ships a boxed look (bordered root, bordered
- * list). Inside this modal we want the admin surface's idiom instead:
- * borderless triggers on a hairline rule, muted by default, primary text
- * plus a 2px primary underline when selected. Rather than change the
- * shared component — which every other Tabs consumer would inherit — the
- * overrides are scoped to `.inline-image-modal-tabs`.
- *
- * Base UI 1.8 marks the selected trigger with `data-active` (not
- * `data-selected`). Colours, weights and transitions mirror
- * `packages/admin/src/presentation/tabs.module.css` so the two strips stay
- * recognisably the same control.
- */
+  .inline-image-modal-title {
+    align-self: stretch;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.875rem;
+    color: var(--text-subtle);
+  }
 
-.inline-image-modal-tabs.byline-tabs-root {
-  padding: 0;
-  gap: 0;
-  border: none;
-  border-radius: 0;
-}
+  /**
+   * Tab strip — matched to the admin document editor's tabs.
+   *
+   * The shared `@byline/ui` Tabs ships a boxed look (bordered root, bordered
+   * list). Inside this modal we want the admin surface's idiom instead:
+   * borderless triggers on a hairline rule, muted by default, primary text
+   * plus a 2px primary underline when selected. Rather than change the
+   * shared component — which every other Tabs consumer would inherit — the
+   * overrides are scoped to `.inline-image-modal-tabs`.
+   *
+   * Base UI 1.8 marks the selected trigger with `data-active` (not
+   * `data-selected`). Colours, weights and transitions mirror
+   * `packages/admin/src/presentation/tabs.module.css` so the two strips stay
+   * recognisably the same control.
+   */
+
+  .inline-image-modal-tabs.byline-tabs-root {
+    padding: 0;
+    gap: 0;
+    border: none;
+    border-radius: 0;
+  }
 
-.inline-image-modal-tabs .byline-tabs-list {
-  gap: 1.25rem;
-  padding: 0;
-  border: none;
-  border-bottom: 1px solid var(--border-color);
-  border-radius: 0;
-}
+  .inline-image-modal-tabs .byline-tabs-list {
+    gap: 1.25rem;
+    padding: 0;
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0;
+  }
 
-.inline-image-modal-tabs .byline-tabs-trigger {
-  position: relative;
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  justify-content: flex-start;
-  padding: 0.5rem 0;
-  /* Sits on top of the list's hairline so the active underline covers it. */
-  margin-bottom: -1px;
-  border: none;
-  border-bottom: 2px solid transparent;
-  background: none;
-  color: var(--gray-500);
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition:
-    color 150ms ease,
-    border-color 150ms ease;
-}
+  .inline-image-modal-tabs .byline-tabs-trigger {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: auto;
+    justify-content: flex-start;
+    padding: 0.5rem 0;
+    /* Sits on top of the list's hairline so the active underline covers it. */
+    margin-bottom: -1px;
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    color: var(--gray-500);
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition:
+      color 150ms ease,
+      border-color 150ms ease;
+  }
 
-.inline-image-modal-tabs .byline-tabs-trigger:hover {
-  color: var(--gray-800);
-  border-bottom-color: var(--gray-300);
-}
+  .inline-image-modal-tabs .byline-tabs-trigger:hover {
+    color: var(--gray-800);
+    border-bottom-color: var(--gray-300);
+  }
 
-.inline-image-modal-tabs .byline-tabs-trigger:focus-visible {
-  outline: none;
-  box-shadow: inset 0 0 0 2px var(--blue-500);
-  border-radius: var(--radius-sm, 3px);
-}
+  .inline-image-modal-tabs .byline-tabs-trigger:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--blue-500);
+    border-radius: var(--radius-sm, 3px);
+  }
 
-.inline-image-modal-tabs .byline-tabs-trigger[data-active] {
-  color: var(--primary-600);
-  border-bottom-color: var(--primary-400);
-}
+  .inline-image-modal-tabs .byline-tabs-trigger[data-active] {
+    color: var(--primary-600);
+    border-bottom-color: var(--primary-400);
+  }
 
-.inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
-  color: var(--primary-600);
-  border-bottom-color: var(--primary-400);
-}
+  .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+    color: var(--primary-600);
+    border-bottom-color: var(--primary-400);
+  }
 
-/*
+  /*
  * Reserve the height of the tallest link state. Measured: 118px with no
  * link, 231px for a custom URL, 301px for a document pick — so choosing a
  * link type would otherwise shift the dialog by ~180px under the cursor.
  * The floor holds the panel steady across all three.
  */
-.inline-image-modal-tabs .inline-image-modal-link-panel {
-  min-height: 20rem;
-}
-
-:is([data-theme="dark"], .dark) {
-  .inline-image-modal-tabs .byline-tabs-trigger {
-    color: var(--gray-400);
+  .inline-image-modal-tabs .inline-image-modal-link-panel {
+    min-height: 20rem;
   }
 
-  .inline-image-modal-tabs .byline-tabs-trigger:hover {
-    color: var(--gray-200);
-    border-bottom-color: var(--gray-600);
-  }
-
-  .inline-image-modal-tabs .byline-tabs-trigger[data-active],
-  .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
-    color: var(--primary-200);
-    border-bottom-color: var(--primary-400);
+  :is([data-theme="dark"], .dark) {
+    .inline-image-modal-tabs .byline-tabs-trigger {
+      color: var(--gray-400);
+    }
+
+    .inline-image-modal-tabs .byline-tabs-trigger:hover {
+      color: var(--gray-200);
+      border-bottom-color: var(--gray-600);
+    }
+
+    .inline-image-modal-tabs .byline-tabs-trigger[data-active],
+    .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+      color: var(--primary-200);
+      border-bottom-color: var(--primary-400);
+    }
   }
 }