@byline/richtext-lexical 6.10.0 → 6.11.0

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

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

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

@@ -1,118 +1,122 @@
-.inline-image-modal-picker {
-  align-items: center;
-  gap: .75rem;
-  display: flex;
-}
-
-.inline-image-modal-thumb, .inline-image-modal-thumb-placeholder {
-  border: 1px solid var(--border-color);
-  border-radius: .25rem;
-  flex-shrink: 0;
-  width: 8rem;
-  height: 8rem;
-}
-
-.inline-image-modal-thumb {
-  object-fit: cover;
-}
-
-.inline-image-modal-thumb-placeholder {
-  background-color: var(--surface-subtle);
-  color: var(--text-subtle);
-  justify-content: center;
-  align-items: center;
-  font-size: .75rem;
-  display: flex;
-}
-
-.inline-image-modal-picker-details {
-  flex-direction: column;
-  flex: 1;
-  align-items: flex-start;
-  gap: .5rem;
-  min-width: 0;
-  display: flex;
-}
-
-.inline-image-modal-change-btn {
-  flex-shrink: 0;
-  min-width: 70px;
-}
-
-.inline-image-modal-title {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-width: 0;
-  color: var(--text-subtle);
-  align-self: stretch;
-  font-size: .875rem;
-  overflow: hidden;
-}
-
-.inline-image-modal-tabs.byline-tabs-root {
-  border: none;
-  border-radius: 0;
-  gap: 0;
-  padding: 0;
-}
-
-.inline-image-modal-tabs .byline-tabs-list {
-  border: none;
-  border-bottom: 1px solid var(--border-color);
-  border-radius: 0;
-  gap: 1.25rem;
-  padding: 0;
-}
-
-.inline-image-modal-tabs .byline-tabs-trigger {
-  width: auto;
-  color: var(--gray-500);
-  font-size: 1rem;
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  background: none;
-  border: none;
-  border-bottom: 2px solid #0000;
-  flex: none;
-  justify-content: flex-start;
-  margin-bottom: -1px;
-  padding: .5rem 0;
-  transition: color .15s, border-color .15s;
-  display: inline-flex;
-  position: relative;
-}
-
-.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 {
-  box-shadow: inset 0 0 0 2px var(--blue-500);
-  border-radius: var(--radius-sm, 3px);
-  outline: none;
-}
-
-.inline-image-modal-tabs .byline-tabs-trigger[data-active], .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
-  color: var(--primary-600);
-  border-bottom-color: var(--primary-400);
-}
-
-.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);
-}
-
-:is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger:hover {
-  color: var(--gray-200);
-  border-bottom-color: var(--gray-600);
-}
-
-:is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active], :is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
-  color: var(--primary-200);
-  border-bottom-color: var(--primary-400);
+@layer base, byline-base, theme, byline-theme, byline-functional, byline-typography, components, byline-components, overrides, byline-utilities, utilities, byline-components.primitives;
+
+@layer byline-components.cms {
+  .inline-image-modal-picker {
+    align-items: center;
+    gap: .75rem;
+    display: flex;
+  }
+
+  .inline-image-modal-thumb, .inline-image-modal-thumb-placeholder {
+    border: 1px solid var(--border-color);
+    border-radius: .25rem;
+    flex-shrink: 0;
+    width: 8rem;
+    height: 8rem;
+  }
+
+  .inline-image-modal-thumb {
+    object-fit: cover;
+  }
+
+  .inline-image-modal-thumb-placeholder {
+    background-color: var(--surface-subtle);
+    color: var(--text-subtle);
+    justify-content: center;
+    align-items: center;
+    font-size: .75rem;
+    display: flex;
+  }
+
+  .inline-image-modal-picker-details {
+    flex-direction: column;
+    flex: 1;
+    align-items: flex-start;
+    gap: .5rem;
+    min-width: 0;
+    display: flex;
+  }
+
+  .inline-image-modal-change-btn {
+    flex-shrink: 0;
+    min-width: 70px;
+  }
+
+  .inline-image-modal-title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+    color: var(--text-subtle);
+    align-self: stretch;
+    font-size: .875rem;
+    overflow: hidden;
+  }
+
+  .inline-image-modal-tabs.byline-tabs-root {
+    border: none;
+    border-radius: 0;
+    gap: 0;
+    padding: 0;
+  }
+
+  .inline-image-modal-tabs .byline-tabs-list {
+    border: none;
+    border-bottom: 1px solid var(--border-color);
+    border-radius: 0;
+    gap: 1.25rem;
+    padding: 0;
+  }
+
+  .inline-image-modal-tabs .byline-tabs-trigger {
+    width: auto;
+    color: var(--gray-500);
+    font-size: 1rem;
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    background: none;
+    border: none;
+    border-bottom: 2px solid #0000;
+    flex: none;
+    justify-content: flex-start;
+    margin-bottom: -1px;
+    padding: .5rem 0;
+    transition: color .15s, border-color .15s;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .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 {
+    box-shadow: inset 0 0 0 2px var(--blue-500);
+    border-radius: var(--radius-sm, 3px);
+    outline: none;
+  }
+
+  .inline-image-modal-tabs .byline-tabs-trigger[data-active], .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+    color: var(--primary-600);
+    border-bottom-color: var(--primary-400);
+  }
+
+  .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);
+  }
+
+  :is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger:hover {
+    color: var(--gray-200);
+    border-bottom-color: var(--gray-600);
+  }
+
+  :is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active], :is([data-theme="dark"], .dark) .inline-image-modal-tabs .byline-tabs-trigger[data-active]:hover {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
 }