@byline/richtext-lexical 6.10.0 → 6.11.0

package/src/field/extensions/link/floating-link-editor.css

@@ -1,128 +1,144 @@
-.link-editor {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  max-width: 400px;
-  width: 100%;
-  opacity: 0;
-  background-color: #fff;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-  border-radius: 6px;
-  transition: opacity 0.5s;
-  will-change: transform;
-}
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
 
-.link-editor .button {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  padding: 6px;
-  border-radius: 6px;
-  cursor: pointer;
-  margin: 0 2px;
-}
+@layer byline-components.primitives, byline-components.cms;
 
-.link-editor .button.hovered {
-  width: 20px;
-  height: 20px;
-  display: inline-block;
-  background-color: #eee;
-}
+@layer byline-components.cms {
+  .link-editor {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+    max-width: 400px;
+    width: 100%;
+    opacity: 0;
+    background-color: #fff;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border-radius: 6px;
+    transition: opacity 0.5s;
+    will-change: transform;
+  }
 
-.link-editor .button i,
-.actions i {
-  background-size: contain;
-  display: inline-block;
-  height: 20px;
-  width: 20px;
-  vertical-align: -0.25em;
-}
+  .link-editor .button {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    padding: 6px;
+    border-radius: 6px;
+    cursor: pointer;
+    margin: 0 2px;
+  }
 
-.link-editor .button.active,
-.toolbar .button.active {
-  background-color: rgb(223, 232, 250);
-}
+  .link-editor .button.hovered {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    background-color: #eee;
+  }
 
-.link-editor .link-input {
-  display: block;
-  min-height: 26px;
-  box-sizing: border-box;
-  margin: 8px 4px 8px 10px;
-  padding: 2px;
-  border-radius: 8px;
-  background-color: #eee;
-  font-size: 15px;
-  color: rgb(5, 5, 5);
-  border: 0;
-  outline: 0;
-  position: relative;
-  font-family: inherit;
-}
+  .link-editor .button i,
+  .actions i {
+    background-size: contain;
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    vertical-align: -0.25em;
+  }
 
-.link-editor .link-view a {
-  display: block;
-  word-break: break-word;
-  width: calc(100% - 33px);
-}
+  .link-editor .button.active,
+  .toolbar .button.active {
+    background-color: rgb(223, 232, 250);
+  }
 
-.link-editor div.link-edit {
-  background-image: url(../../images/icons/pencil-fill.svg);
-  background-size: 16px;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 35px;
-  vertical-align: -0.25em;
-  position: absolute;
-  right: 30px;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-}
+  .link-editor .link-input {
+    display: block;
+    min-height: 26px;
+    box-sizing: border-box;
+    margin: 8px 4px 8px 10px;
+    padding: 2px;
+    border-radius: 8px;
+    background-color: #eee;
+    font-size: 15px;
+    color: rgb(5, 5, 5);
+    border: 0;
+    outline: 0;
+    position: relative;
+    font-family: inherit;
+  }
 
-.link-editor div.link-trash {
-  background-image: url(../../images/icons/trash.svg);
-  background-size: 16px;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 35px;
-  vertical-align: -0.25em;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  cursor: pointer;
-}
+  .link-editor .link-view a {
+    display: block;
+    word-break: break-word;
+    width: calc(100% - 33px);
+  }
 
-.link-editor .link-input a {
-  color: rgb(33, 111, 219);
-  text-decoration: none;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  margin-right: 30px;
-  text-overflow: ellipsis;
-}
+  .link-editor div.link-edit {
+    background-image: url(../../images/icons/pencil-fill.svg);
+    background-size: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 35px;
+    vertical-align: -0.25em;
+    position: absolute;
+    right: 30px;
+    top: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
 
-.link-editor .link-input a:hover {
-  text-decoration: underline;
-}
+  .link-editor div.link-trash {
+    background-image: url(../../images/icons/trash.svg);
+    background-size: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 35px;
+    vertical-align: -0.25em;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: pointer;
+  }
 
-.link-editor .font-size-wrapper,
-.link-editor .font-family-wrapper {
-  display: flex;
-  margin: 0 4px;
-}
+  .link-editor .link-input a {
+    color: rgb(33, 111, 219);
+    text-decoration: none;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 30px;
+    text-overflow: ellipsis;
+  }
 
-.link-editor select {
-  padding: 6px;
-  border: none;
-  background-color: rgba(0, 0, 0, 0.075);
-  border-radius: 4px;
-}
+  .link-editor .link-input a:hover {
+    text-decoration: underline;
+  }
 
-.dark {
-  .link-editor {
-    background-color: var(--canvas-800);
+  .link-editor .font-size-wrapper,
+  .link-editor .font-family-wrapper {
+    display: flex;
+    margin: 0 4px;
+  }
+
+  .link-editor select {
+    padding: 6px;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.075);
+    border-radius: 4px;
+  }
+
+  .dark {
+    .link-editor {
+      background-color: var(--canvas-800);
+    }
   }
 }

package/src/field/extensions/link/link-target-fields.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;
+
 /**
  * Link-target picker — the "Target document" frame.
  *
@@ -14,68 +28,70 @@
  * break without warning. The values are what keep the two in step.
  */
 
-.byline-link-target-frame {
-  margin-top: 0.25rem;
-  padding: 0.5rem;
-  border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--field-border);
-  border-radius: var(--border-radius-md, 6px);
-}
+@layer byline-components.cms {
+  .byline-link-target-frame {
+    margin-top: 0.25rem;
+    padding: 0.5rem;
+    border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--field-border);
+    border-radius: var(--border-radius-md, 6px);
+  }
 
-/* The chosen document: summary on the left, actions pinned right. */
-.byline-link-target-tile {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--spacing-8, 0.5rem);
-  padding: var(--spacing-8, 0.5rem);
-  border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--primary-500);
-  border-radius: var(--border-radius-md, 6px);
-  font-size: var(--font-size-xs);
-}
+  /* The chosen document: summary on the left, actions pinned right. */
+  .byline-link-target-tile {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacing-8, 0.5rem);
+    padding: var(--spacing-8, 0.5rem);
+    border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--primary-500);
+    border-radius: var(--border-radius-md, 6px);
+    font-size: var(--font-size-xs);
+  }
 
-.byline-link-target-summary {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.125rem;
-}
+  .byline-link-target-summary {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
 
-/* Small "type" line above the value — the target collection's label. */
-.byline-link-target-kind {
-  color: var(--gray-500);
-}
+  /* Small "type" line above the value — the target collection's label. */
+  .byline-link-target-kind {
+    color: var(--gray-500);
+  }
 
-.byline-link-target-value {
-  overflow: hidden;
-  color: var(--gray-900);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
+  .byline-link-target-value {
+    overflow: hidden;
+    color: var(--gray-900);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-.byline-link-target-actions {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  gap: var(--spacing-4, 0.25rem);
-}
+  .byline-link-target-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--spacing-4, 0.25rem);
+  }
 
-.byline-link-target-actions .byline-button {
-  color: var(--gray-900);
-}
+  .byline-link-target-actions .byline-button {
+    color: var(--gray-900);
+  }
 
-:is([data-theme="dark"], .dark) {
-  /* A darker hairline than `--field-border` gives on this surface: the
+  :is([data-theme="dark"], .dark) {
+    /* A darker hairline than `--field-border` gives on this surface: the
      modal sits on an already-raised panel, so the default reads as a
      bright outline rather than a division. */
-  .byline-link-target-frame {
-    border-color: var(--canvas-700, var(--field-border));
-  }
+    .byline-link-target-frame {
+      border-color: var(--canvas-700, var(--field-border));
+    }
 
-  .byline-link-target-value {
-    color: var(--gray-100);
-  }
+    .byline-link-target-value {
+      color: var(--gray-100);
+    }
 
-  .byline-link-target-actions .byline-button {
-    color: var(--gray-200);
+    .byline-link-target-actions .byline-button {
+      color: var(--gray-200);
+    }
   }
 }

package/src/field/normalize/adapted-notice.css

@@ -6,9 +6,10 @@
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
-
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /**
  * Content-adaptation notices.
  *
@@ -21,7 +22,7 @@
  * Declared in `byline-components` so the layer order the admin
  * establishes governs them, rather than Tailwind's preflight.
  */
-@layer byline-components {
+@layer byline-components.cms {
   .byline-richtext-notice {
     border-radius: var(--border-radius-sm, 4px);
     font-size: var(--font-size-sm, 0.8125rem);

package/src/field/plugins/table-plugin/table-modal.css

@@ -1,19 +1,35 @@
-.table-modal-container {
-  min-width: 340px;
-  max-width: 600px;
-}
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
 
-.table-modal-header {
-  margin-bottom: 0.5rem;
-}
+@layer byline-components.primitives, byline-components.cms;
 
-@media screen and (min-width: 640px) {
-  .table-modal-select {
-    margin: 1rem 0 0.5rem;
-    width: 100%;
+@layer byline-components.cms {
+  .table-modal-container {
+    min-width: 340px;
+    max-width: 600px;
   }
 
-  .table-modal-actions {
-    margin: 0;
+  .table-modal-header {
+    margin-bottom: 0.5rem;
+  }
+
+  @media screen and (min-width: 640px) {
+    .table-modal-select {
+      margin: 1rem 0 0.5rem;
+      width: 100%;
+    }
+
+    .table-modal-actions {
+      margin: 0;
+    }
   }
 }