@byline/admin 6.10.1 → 6.11.0

package/src/fields/code/code-field.module.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;
+
 /**
  * CodeField — CodeMirror-backed source-code input.
  *
@@ -15,70 +29,72 @@
  * overriding these variables on `.byline-field-code`.
  */
 
-.label-row,
-:global(.byline-field-code-label-row) {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.25rem;
-}
-
-:global(.byline-field-code) {
-  /* Chrome */
-  --byline-code-bg: var(--canvas-50, #fafafa);
-  --byline-code-fg: var(--canvas-950, #1c1c1e);
-  --byline-code-border: var(--canvas-300, #d6d6d6);
-  --byline-code-gutter-bg: var(--canvas-100, #f2f2f2);
-  --byline-code-gutter-fg: var(--canvas-500, #8b8b90);
-  --byline-code-active-line: rgba(0, 0, 0, 0.04);
-  --byline-code-selection: rgba(59, 130, 246, 0.18);
-  --byline-code-caret: var(--canvas-950, #1c1c1e);
-  --byline-code-focus-ring: rgba(59, 130, 246, 0.6);
-
-  /* Syntax */
-  --byline-code-keyword: #7c3aed;
-  --byline-code-string: #15803d;
-  --byline-code-comment: #767680;
-  --byline-code-number: #c2410c;
-  --byline-code-function: #1d4ed8;
-  --byline-code-type: #0f766e;
-  --byline-code-property: #a16207;
-  --byline-code-operator: #52525b;
-}
+@layer byline-components.cms {
+  .label-row,
+  :global(.byline-field-code-label-row) {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
   :global(.byline-field-code) {
     /* Chrome */
-    --byline-code-bg: var(--canvas-900, #1b1b1f);
-    --byline-code-fg: var(--canvas-100, #e6e6ea);
-    --byline-code-border: var(--canvas-700, #3f3f46);
-    --byline-code-gutter-bg: var(--canvas-800, #232327);
-    --byline-code-gutter-fg: var(--canvas-500, #77777f);
-    --byline-code-active-line: rgba(255, 255, 255, 0.05);
-    --byline-code-selection: rgba(96, 165, 250, 0.28);
-    --byline-code-caret: var(--canvas-100, #e6e6ea);
-    --byline-code-focus-ring: rgba(96, 165, 250, 0.55);
+    --byline-code-bg: var(--canvas-50, #fafafa);
+    --byline-code-fg: var(--canvas-950, #1c1c1e);
+    --byline-code-border: var(--canvas-300, #d6d6d6);
+    --byline-code-gutter-bg: var(--canvas-100, #f2f2f2);
+    --byline-code-gutter-fg: var(--canvas-500, #8b8b90);
+    --byline-code-active-line: rgba(0, 0, 0, 0.04);
+    --byline-code-selection: rgba(59, 130, 246, 0.18);
+    --byline-code-caret: var(--canvas-950, #1c1c1e);
+    --byline-code-focus-ring: rgba(59, 130, 246, 0.6);
 
     /* Syntax */
-    --byline-code-keyword: #c4b5fd;
-    --byline-code-string: #86efac;
-    --byline-code-comment: #8e8e96;
-    --byline-code-number: #fdba74;
-    --byline-code-function: #93c5fd;
-    --byline-code-type: #5eead4;
-    --byline-code-property: #fde047;
-    --byline-code-operator: #a1a1aa;
+    --byline-code-keyword: #7c3aed;
+    --byline-code-string: #15803d;
+    --byline-code-comment: #767680;
+    --byline-code-number: #c2410c;
+    --byline-code-function: #1d4ed8;
+    --byline-code-type: #0f766e;
+    --byline-code-property: #a16207;
+    --byline-code-operator: #52525b;
   }
-}
 
-.loading,
-:global(.byline-field-code-loading) {
-  width: 100%;
-  resize: none;
-  font-family: var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--byline-code-font-size, 13px);
-  color: var(--byline-code-fg);
-  background-color: var(--byline-code-bg);
-  border: 1px solid var(--byline-code-border);
-  border-radius: var(--byline-code-radius, 4px);
-  padding: 0.5rem;
+  :is([data-theme="dark"], :global(.dark)) {
+    :global(.byline-field-code) {
+      /* Chrome */
+      --byline-code-bg: var(--canvas-900, #1b1b1f);
+      --byline-code-fg: var(--canvas-100, #e6e6ea);
+      --byline-code-border: var(--canvas-700, #3f3f46);
+      --byline-code-gutter-bg: var(--canvas-800, #232327);
+      --byline-code-gutter-fg: var(--canvas-500, #77777f);
+      --byline-code-active-line: rgba(255, 255, 255, 0.05);
+      --byline-code-selection: rgba(96, 165, 250, 0.28);
+      --byline-code-caret: var(--canvas-100, #e6e6ea);
+      --byline-code-focus-ring: rgba(96, 165, 250, 0.55);
+
+      /* Syntax */
+      --byline-code-keyword: #c4b5fd;
+      --byline-code-string: #86efac;
+      --byline-code-comment: #8e8e96;
+      --byline-code-number: #fdba74;
+      --byline-code-function: #93c5fd;
+      --byline-code-type: #5eead4;
+      --byline-code-property: #fde047;
+      --byline-code-operator: #a1a1aa;
+    }
+  }
+
+  .loading,
+  :global(.byline-field-code-loading) {
+    width: 100%;
+    resize: none;
+    font-family: var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: var(--byline-code-font-size, 13px);
+    color: var(--byline-code-fg);
+    background-color: var(--byline-code-bg);
+    border: 1px solid var(--byline-code-border);
+    border-radius: var(--byline-code-radius, 4px);
+    padding: 0.5rem;
+  }
 }

package/src/fields/datetime/datetime-field.module.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;
+
 /**
  * DateTimeField — date/time picker form widget.
  *
@@ -7,7 +21,9 @@
  *                                    field has unsaved local changes
  */
 
-.dirty,
-:global(.byline-field-datetime-dirty) {
-  border-color: var(--blue-300);
+@layer byline-components.cms {
+  .dirty,
+  :global(.byline-field-datetime-dirty) {
+    border-color: var(--blue-300);
+  }
 }

package/src/fields/draggable-context-menu.module.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;
+
 /**
  * DraggableContextMenu — small `…` dropdown attached to draggable list rows.
  *
@@ -11,117 +25,119 @@
  *   .byline-draggable-menu-separator   — separator between items
  */
 
-.menu,
-:global(.byline-draggable-menu) {
-  z-index: 40;
-  width: 8.5rem;
-  padding: 0.25rem 0.375rem;
-  background-color: white;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  border-radius: var(--border-radius-sm);
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
-}
-
-.item,
-:global(.byline-draggable-menu-item) {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  width: 100%;
-  padding: 5px 2px;
-  border-radius: var(--border-radius-sm);
-  color: var(--gray-600);
-  cursor: default;
-  user-select: none;
-  outline: none;
-}
-
-@media (min-width: 48rem) {
-  .item,
-  :global(.byline-draggable-menu-item) {
-    font-size: var(--font-size-sm);
-  }
-}
-
-.item:hover,
-.item:focus,
-:global(.byline-draggable-menu-item):hover,
-:global(.byline-draggable-menu-item):focus {
-  background-color: oklch(from var(--canvas-50) l c h / 0.3);
-}
-
-.row,
-:global(.byline-draggable-menu-row) {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  width: 100%;
-}
-
-.icon-slot,
-:global(.byline-draggable-menu-icon-slot) {
-  display: inline-block;
-  width: 22px;
-}
-
-.label,
-:global(.byline-draggable-menu-label) {
-  display: inline-block;
-  flex: 1;
-  width: 100%;
-  align-self: flex-start;
-  text-align: left;
-  color: black;
-}
-
-.label-danger,
-:global(.byline-draggable-menu-label-danger) {
-  color: var(--red-600);
-}
-
-.delete-icon,
-:global(.byline-draggable-menu-delete-icon) {
-  stroke: var(--red-600);
-}
-
-.separator,
-:global(.byline-draggable-menu-separator) {
-  width: 90%;
-  margin: 0.25rem auto;
-  border: none;
-  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-}
-
-/* ─── Dark theme variants ───────────────────────────────────── */
-
-:is([data-theme="dark"], :global(.dark)) {
+@layer byline-components.cms {
   .menu,
   :global(.byline-draggable-menu) {
-    background-color: var(--canvas-800);
-    border-color: var(--canvas-700);
+    z-index: 40;
+    width: 8.5rem;
+    padding: 0.25rem 0.375rem;
+    background-color: white;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    border-radius: var(--border-radius-sm);
+    box-shadow:
+      0 4px 6px -1px rgb(0 0 0 / 0.1),
+      0 2px 4px -2px rgb(0 0 0 / 0.1);
   }
 
   .item,
   :global(.byline-draggable-menu-item) {
-    color: var(--gray-300);
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    width: 100%;
+    padding: 5px 2px;
+    border-radius: var(--border-radius-sm);
+    color: var(--gray-600);
+    cursor: default;
+    user-select: none;
+    outline: none;
+  }
+
+  @media (min-width: 48rem) {
+    .item,
+    :global(.byline-draggable-menu-item) {
+      font-size: var(--font-size-sm);
+    }
   }
 
   .item:hover,
   .item:focus,
   :global(.byline-draggable-menu-item):hover,
   :global(.byline-draggable-menu-item):focus {
-    background-color: var(--canvas-900);
+    background-color: oklch(from var(--canvas-50) l c h / 0.3);
+  }
+
+  .row,
+  :global(.byline-draggable-menu-row) {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    width: 100%;
+  }
+
+  .icon-slot,
+  :global(.byline-draggable-menu-icon-slot) {
+    display: inline-block;
+    width: 22px;
   }
 
   .label,
   :global(.byline-draggable-menu-label) {
-    color: var(--gray-300);
+    display: inline-block;
+    flex: 1;
+    width: 100%;
+    align-self: flex-start;
+    text-align: left;
+    color: black;
+  }
+
+  .label-danger,
+  :global(.byline-draggable-menu-label-danger) {
+    color: var(--red-600);
+  }
+
+  .delete-icon,
+  :global(.byline-draggable-menu-delete-icon) {
+    stroke: var(--red-600);
   }
 
   .separator,
   :global(.byline-draggable-menu-separator) {
-    border-top-color: var(--gray-900);
+    width: 90%;
+    margin: 0.25rem auto;
+    border: none;
+    border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  }
+
+  /* ─── Dark theme variants ───────────────────────────────────── */
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .menu,
+    :global(.byline-draggable-menu) {
+      background-color: var(--canvas-800);
+      border-color: var(--canvas-700);
+    }
+
+    .item,
+    :global(.byline-draggable-menu-item) {
+      color: var(--gray-300);
+    }
+
+    .item:hover,
+    .item:focus,
+    :global(.byline-draggable-menu-item):hover,
+    :global(.byline-draggable-menu-item):focus {
+      background-color: var(--canvas-900);
+    }
+
+    .label,
+    :global(.byline-draggable-menu-label) {
+      color: var(--gray-300);
+    }
+
+    .separator,
+    :global(.byline-draggable-menu-separator) {
+      border-top-color: var(--gray-900);
+    }
   }
 }

package/src/fields/field-renderer.module.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;
+
 /**
  * FieldRenderer — main field-type switch wrapper.
  *
@@ -8,15 +22,17 @@
  *   .byline-field-localized-badge  — the absolutely-positioned badge slot
  */
 
-.localized-wrap,
-:global(.byline-field-localized-wrap) {
-  position: relative;
-}
+@layer byline-components.cms {
+  .localized-wrap,
+  :global(.byline-field-localized-wrap) {
+    position: relative;
+  }
 
-.localized-badge,
-:global(.byline-field-localized-badge) {
-  position: absolute;
-  top: 0;
-  right: 0;
-  line-height: 1;
+  .localized-badge,
+  :global(.byline-field-localized-badge) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    line-height: 1;
+  }
 }