@byline/admin 6.10.0 → 6.11.0

package/src/modules/admin-permissions/components/inspector.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;
+
 /**
  * AbilitiesInspector — registry inspector with lazy-loaded role/user matrices.
  *
@@ -36,291 +50,293 @@
  *   .byline-inspector-matrix-machine — muted machine-name suffix
  */
 
-.head,
-:global(.byline-inspector-head) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-12);
-  margin-bottom: var(--spacing-16);
-}
-
-.title,
-:global(.byline-inspector-title) {
-  margin: 0;
-}
-
-.count-pill,
-:global(.byline-inspector-count-pill) {
-  background-color: var(--gray-25);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  padding: var(--spacing-4) var(--spacing-8);
-  font-size: var(--font-size-sm);
-  border-radius: var(--border-radius-sm);
-}
-
-.lead,
-:global(.byline-inspector-lead) {
-  margin-bottom: var(--spacing-16);
-  font-size: var(--font-size-sm);
-}
-
-.empty,
-:global(.byline-inspector-empty) {
-  /* Inherits .muted colour from sibling utility class. */
-}
-
-.groups,
-:global(.byline-inspector-groups) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
-
-.group,
-:global(.byline-inspector-group) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-}
-
-/* Hide the default summary disclosure marker (browser-specific). */
-.group :global(summary)::-webkit-details-marker {
-  display: none;
-}
-
-.group-summary,
-:global(.byline-inspector-group-summary) {
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-12);
-  list-style: none;
-}
-
-.group-name,
-:global(.byline-inspector-group-name) {
-  font-weight: var(--font-weight-medium);
-}
-
-.group-count,
-:global(.byline-inspector-group-count) {
-  font-size: var(--font-size-xs);
-}
-
-.group-body,
-:global(.byline-inspector-group-body) {
-  padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
-}
-
-.row,
-:global(.byline-inspector-row) {
-  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  padding: var(--spacing-8) 0;
-}
-
-.row:first-child,
-:global(.byline-inspector-row):first-child {
-  border-top: 0;
-}
-
-.row-head,
-:global(.byline-inspector-row-head) {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-12);
-}
-
-.row-info,
-:global(.byline-inspector-row-info) {
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-.row-meta,
-:global(.byline-inspector-row-meta) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-
-.row-key,
-:global(.byline-inspector-row-key) {
-  background-color: var(--gray-50);
-  padding: 0.125rem 0.375rem;
-  font-size: var(--font-size-xs);
-  border-radius: var(--border-radius-sm);
-}
-
-.row-source,
-:global(.byline-inspector-row-source) {
-  padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-radius: var(--border-radius-sm);
-  background-color: var(--gray-100);
-  color: var(--gray-800);
-}
-
-.row-source-collection,
-:global(.byline-inspector-row-source-collection) {
-  background-color: var(--gray-100);
-  color: var(--gray-800);
-}
-
-.row-source-admin,
-:global(.byline-inspector-row-source-admin) {
-  background-color: var(--blue-50);
-  color: var(--blue-700);
-}
+@layer byline-components.cms {
+  .head,
+  :global(.byline-inspector-head) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-12);
+    margin-bottom: var(--spacing-16);
+  }
 
-.row-source-plugin,
-:global(.byline-inspector-row-source-plugin) {
-  /* No purple token in uikit; fall back to primary scale. */
-  background-color: var(--primary-50);
-  color: var(--primary-700);
-}
+  .title,
+  :global(.byline-inspector-title) {
+    margin: 0;
+  }
 
-.row-source-core,
-:global(.byline-inspector-row-source-core) {
-  background-color: var(--green-50);
-  color: var(--green-700);
-}
+  .count-pill,
+  :global(.byline-inspector-count-pill) {
+    background-color: var(--gray-25);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    padding: var(--spacing-4) var(--spacing-8);
+    font-size: var(--font-size-sm);
+    border-radius: var(--border-radius-sm);
+  }
 
-.row-source-unknown,
-:global(.byline-inspector-row-source-unknown) {
-  background-color: var(--gray-50);
-  color: var(--gray-600);
-}
+  .lead,
+  :global(.byline-inspector-lead) {
+    margin-bottom: var(--spacing-16);
+    font-size: var(--font-size-sm);
+  }
 
-.row-label,
-:global(.byline-inspector-row-label) {
-  margin: var(--spacing-4) 0 0 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
+  .empty,
+  :global(.byline-inspector-empty) {
+    /* Inherits .muted colour from sibling utility class. */
+  }
 
-.row-description,
-:global(.byline-inspector-row-description) {
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
-}
+  .groups,
+  :global(.byline-inspector-groups) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.loader,
-:global(.byline-inspector-loader) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-8);
-  font-size: var(--font-size-sm);
-}
+  .group,
+  :global(.byline-inspector-group) {
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-sm);
+  }
 
-.matrix,
-:global(.byline-inspector-matrix) {
-  margin-top: var(--spacing-8);
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-12);
-  padding: var(--spacing-12);
-  background-color: var(--canvas-25);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-}
+  /* Hide the default summary disclosure marker (browser-specific). */
+  .group :global(summary)::-webkit-details-marker {
+    display: none;
+  }
 
-@media (min-width: 40rem) {
-  .matrix,
-  :global(.byline-inspector-matrix) {
-    grid-template-columns: 1fr 1fr;
+  .group-summary,
+  :global(.byline-inspector-group-summary) {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-12);
+    list-style: none;
   }
-}
 
-.matrix-title,
-:global(.byline-inspector-matrix-title) {
-  margin: 0 0 var(--spacing-8) 0;
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-bold);
-}
+  .group-name,
+  :global(.byline-inspector-group-name) {
+    font-weight: var(--font-weight-medium);
+  }
 
-.matrix-empty,
-:global(.byline-inspector-matrix-empty) {
-  margin: 0;
-  font-style: italic;
-  font-size: var(--font-size-sm);
-}
+  .group-count,
+  :global(.byline-inspector-group-count) {
+    font-size: var(--font-size-xs);
+  }
 
-.matrix-list,
-:global(.byline-inspector-matrix-list) {
-  margin: 0;
-  list-style: none;
-  padding: 0;
-  font-size: var(--font-size-sm);
-}
+  .group-body,
+  :global(.byline-inspector-group-body) {
+    padding: 0 var(--spacing-12) var(--spacing-12) var(--spacing-12);
+  }
 
-.matrix-item,
-:global(.byline-inspector-matrix-item) {
-  margin-bottom: var(--spacing-4);
-}
+  .row,
+  :global(.byline-inspector-row) {
+    border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    padding: var(--spacing-8) 0;
+  }
 
-.matrix-name,
-:global(.byline-inspector-matrix-name) {
-  font-weight: var(--font-weight-medium);
-}
+  .row:first-child,
+  :global(.byline-inspector-row):first-child {
+    border-top: 0;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .count-pill,
-  :global(.byline-inspector-count-pill) {
-    background-color: var(--canvas-700);
-    border-color: var(--gray-700);
+  .row-head,
+  :global(.byline-inspector-row-head) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-12);
   }
 
-  .group,
-  :global(.byline-inspector-group) {
-    border-color: var(--gray-700);
+  .row-info,
+  :global(.byline-inspector-row-info) {
+    min-width: 0;
+    flex: 1 1 0;
   }
 
-  .row,
-  :global(.byline-inspector-row) {
-    border-top-color: var(--gray-700);
+  .row-meta,
+  :global(.byline-inspector-row-meta) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
   }
 
   .row-key,
   :global(.byline-inspector-row-key) {
-    background-color: var(--canvas-800);
+    background-color: var(--gray-50);
+    padding: 0.125rem 0.375rem;
+    font-size: var(--font-size-xs);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .row-source,
+  :global(.byline-inspector-row-source) {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-radius: var(--border-radius-sm);
+    background-color: var(--gray-100);
+    color: var(--gray-800);
   }
 
   .row-source-collection,
   :global(.byline-inspector-row-source-collection) {
-    background-color: var(--canvas-700);
-    color: var(--gray-200);
+    background-color: var(--gray-100);
+    color: var(--gray-800);
   }
 
   .row-source-admin,
   :global(.byline-inspector-row-source-admin) {
-    background-color: var(--blue-900);
-    color: var(--blue-200);
+    background-color: var(--blue-50);
+    color: var(--blue-700);
   }
 
   .row-source-plugin,
   :global(.byline-inspector-row-source-plugin) {
-    background-color: var(--primary-900);
-    color: var(--primary-200);
+    /* No purple token in uikit; fall back to primary scale. */
+    background-color: var(--primary-50);
+    color: var(--primary-700);
   }
 
   .row-source-core,
   :global(.byline-inspector-row-source-core) {
-    background-color: var(--green-900);
-    color: var(--green-200);
+    background-color: var(--green-50);
+    color: var(--green-700);
   }
 
   .row-source-unknown,
   :global(.byline-inspector-row-source-unknown) {
-    background-color: var(--canvas-800);
-    color: var(--gray-400);
+    background-color: var(--gray-50);
+    color: var(--gray-600);
+  }
+
+  .row-label,
+  :global(.byline-inspector-row-label) {
+    margin: var(--spacing-4) 0 0 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .row-description,
+  :global(.byline-inspector-row-description) {
+    margin-bottom: 0;
+    font-size: var(--font-size-xs);
+  }
+
+  .loader,
+  :global(.byline-inspector-loader) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-8);
+    font-size: var(--font-size-sm);
   }
 
   .matrix,
   :global(.byline-inspector-matrix) {
-    background-color: var(--canvas-800);
-    border-color: var(--gray-700);
+    margin-top: var(--spacing-8);
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-12);
+    padding: var(--spacing-12);
+    background-color: var(--canvas-25);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-sm);
+  }
+
+  @media (min-width: 40rem) {
+    .matrix,
+    :global(.byline-inspector-matrix) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .matrix-title,
+  :global(.byline-inspector-matrix-title) {
+    margin: 0 0 var(--spacing-8) 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-bold);
+  }
+
+  .matrix-empty,
+  :global(.byline-inspector-matrix-empty) {
+    margin: 0;
+    font-style: italic;
+    font-size: var(--font-size-sm);
+  }
+
+  .matrix-list,
+  :global(.byline-inspector-matrix-list) {
+    margin: 0;
+    list-style: none;
+    padding: 0;
+    font-size: var(--font-size-sm);
+  }
+
+  .matrix-item,
+  :global(.byline-inspector-matrix-item) {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .matrix-name,
+  :global(.byline-inspector-matrix-name) {
+    font-weight: var(--font-weight-medium);
+  }
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .count-pill,
+    :global(.byline-inspector-count-pill) {
+      background-color: var(--canvas-700);
+      border-color: var(--gray-700);
+    }
+
+    .group,
+    :global(.byline-inspector-group) {
+      border-color: var(--gray-700);
+    }
+
+    .row,
+    :global(.byline-inspector-row) {
+      border-top-color: var(--gray-700);
+    }
+
+    .row-key,
+    :global(.byline-inspector-row-key) {
+      background-color: var(--canvas-800);
+    }
+
+    .row-source-collection,
+    :global(.byline-inspector-row-source-collection) {
+      background-color: var(--canvas-700);
+      color: var(--gray-200);
+    }
+
+    .row-source-admin,
+    :global(.byline-inspector-row-source-admin) {
+      background-color: var(--blue-900);
+      color: var(--blue-200);
+    }
+
+    .row-source-plugin,
+    :global(.byline-inspector-row-source-plugin) {
+      background-color: var(--primary-900);
+      color: var(--primary-200);
+    }
+
+    .row-source-core,
+    :global(.byline-inspector-row-source-core) {
+      background-color: var(--green-900);
+      color: var(--green-200);
+    }
+
+    .row-source-unknown,
+    :global(.byline-inspector-row-source-unknown) {
+      background-color: var(--canvas-800);
+      color: var(--gray-400);
+    }
+
+    .matrix,
+    :global(.byline-inspector-matrix) {
+      background-color: var(--canvas-800);
+      border-color: var(--gray-700);
+    }
   }
 }

package/src/modules/admin-roles/components/create.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;
+
 /**
  * CreateAdminRole — drawer form for creating a new role.
  *
@@ -8,33 +22,35 @@
  *   .byline-role-create-action   — buttons in the actions row
  */
 
-.wrap,
-:global(.byline-role-create-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
+@layer byline-components.cms {
+  .wrap,
+  :global(.byline-role-create-wrap) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4);
+    margin-top: var(--spacing-4);
+  }
 
-.form,
-:global(.byline-role-create-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
+  .form,
+  :global(.byline-role-create-form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: var(--spacing-8);
+  }
 
-.actions,
-:global(.byline-role-create-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
+  .actions,
+  :global(.byline-role-create-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-16);
+  }
 
-.action,
-:global(.byline-role-create-action) {
-  min-width: 4rem;
+  .action,
+  :global(.byline-role-create-action) {
+    min-width: 4rem;
+  }
 }