@byline/admin 6.10.0 → 6.11.0

package/src/modules/admin-roles/components/permissions.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;
+
 /**
  * RolePermissions — inline per-role ability editor.
  *
@@ -30,250 +44,239 @@
  *   .byline-role-permissions-mode-button-disabled — disabled-cursor modifier
  */
 
-.wrap,
-:global(.byline-role-permissions-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-12);
-  margin-bottom: var(--spacing-48);
-}
-
-.toolbar,
-:global(.byline-role-permissions-toolbar) {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-12);
-  padding: var(--spacing-12);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  background-color: var(--canvas-25);
-  border-radius: var(--border-radius-sm);
-}
+@layer byline-components.cms {
+  .wrap,
+  :global(.byline-role-permissions-wrap) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    margin-bottom: var(--spacing-48);
+  }
 
-.counter,
-:global(.byline-role-permissions-counter) {
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
+  .toolbar,
+  :global(.byline-role-permissions-toolbar) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-12);
+    padding: var(--spacing-12);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    background-color: var(--canvas-25);
+    border-radius: var(--border-radius-sm);
+  }
 
-.counter-num,
-:global(.byline-role-permissions-counter-num) {
-  font-weight: var(--font-weight-medium);
-}
+  .counter,
+  :global(.byline-role-permissions-counter) {
+    margin: 0;
+    font-size: var(--font-size-sm);
+  }
 
-.actions,
-:global(.byline-role-permissions-actions) {
-  margin-left: auto;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
+  .counter-num,
+  :global(.byline-role-permissions-counter-num) {
+    font-weight: var(--font-weight-medium);
+  }
 
-.action,
-:global(.byline-role-permissions-action) {
-  min-width: 4rem;
-}
+  .actions,
+  :global(.byline-role-permissions-actions) {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+  }
 
-/*
- * Checkbox shrink-fit — overrides the uikit Checkbox's `width: 100%`
- * default container so the external label sits flush against the
- * checkbox button. Replaces the `!w-auto` Tailwind utility we used
- * pre-lift; with the component now in a published package, Tailwind's
- * source scanner no longer sees that class string in the host so the
- * rule was never generated and the label was being pushed to the right.
- *
- * `!important` is required — the uikit Checkbox sets `width: 100%`
- * at the same specificity, so a plain rule loses to source-order. The
- * pre-lift Tailwind class `!w-auto` carried `!important` via Tailwind's
- * `!` prefix; this is the same effect, expressed in a CSS module.
- */
-.checkbox-auto,
-:global(.byline-role-permissions-checkbox-auto) {
-  /* biome-ignore lint/complexity/noImportantStyles: see comment above */
-  width: auto !important;
-}
+  .action,
+  :global(.byline-role-permissions-action) {
+    min-width: 4rem;
+  }
 
-.groups,
-:global(.byline-role-permissions-groups) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+  /* The CMS sublayer refines the primitive checkbox width; direct utilities still win. */
+  .checkbox-auto,
+  :global(.byline-role-permissions-checkbox-auto) {
+    width: auto;
+  }
 
-.group,
-:global(.byline-role-permissions-group) {
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  border-radius: var(--border-radius-sm);
-}
+  .groups,
+  :global(.byline-role-permissions-groups) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.group-head,
-:global(.byline-role-permissions-group-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-12);
-  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-}
+  .group,
+  :global(.byline-role-permissions-group) {
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    border-radius: var(--border-radius-sm);
+  }
 
-.group-name,
-:global(.byline-role-permissions-group-name) {
-  font-weight: var(--font-weight-medium);
-}
+  .group-head,
+  :global(.byline-role-permissions-group-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-12);
+    border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  }
 
-.group-count,
-:global(.byline-role-permissions-group-count) {
-  margin-left: var(--spacing-8);
-  font-size: var(--font-size-xs);
-}
+  .group-name,
+  :global(.byline-role-permissions-group-name) {
+    font-weight: var(--font-weight-medium);
+  }
 
-.group-buttons,
-:global(.byline-role-permissions-group-buttons) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-4);
-}
+  .group-count,
+  :global(.byline-role-permissions-group-count) {
+    margin-left: var(--spacing-8);
+    font-size: var(--font-size-xs);
+  }
 
-.grid,
-:global(.byline-role-permissions-grid) {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-4);
-  padding: var(--spacing-12);
-}
+  .group-buttons,
+  :global(.byline-role-permissions-group-buttons) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4);
+  }
 
-@media (min-width: 40rem) {
   .grid,
   :global(.byline-role-permissions-grid) {
-    grid-template-columns: 1fr 1fr;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-4);
+    padding: var(--spacing-12);
   }
-}
-
-.row,
-:global(.byline-role-permissions-row) {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4) 0;
-}
-
-.label,
-:global(.byline-role-permissions-label) {
-  min-width: 0;
-  flex: 1 1 0;
-  cursor: default;
-}
-
-.label-edit,
-:global(.byline-role-permissions-label-edit) {
-  cursor: pointer;
-}
-
-.label-head,
-:global(.byline-role-permissions-label-head) {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-8);
-}
-
-.label-name,
-:global(.byline-role-permissions-label-name) {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-.key,
-:global(.byline-role-permissions-key) {
-  background-color: var(--gray-100);
-  padding: 0.125rem 0.375rem;
-  font-size: var(--font-size-xs);
-  border-radius: var(--border-radius-sm);
-}
-
-.description,
-:global(.byline-role-permissions-description) {
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
-}
-
-.mode-toggle,
-:global(.byline-role-permissions-mode-toggle) {
-  display: inline-flex;
-  overflow: hidden;
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-  border-radius: var(--border-radius-sm);
-}
 
-.mode-button,
-:global(.byline-role-permissions-mode-button) {
-  padding: 0.125rem 0.625rem;
-  font-size: var(--font-size-xs);
-  background-color: transparent;
-  border: 0;
-  cursor: pointer;
-  transition: background-color 150ms ease;
-}
-
-.mode-button:hover,
-:global(.byline-role-permissions-mode-button):hover {
-  background-color: var(--gray-50);
-}
-
-.mode-button-active,
-:global(.byline-role-permissions-mode-button-active) {
-  background-color: var(--gray-100);
-  font-weight: var(--font-weight-medium);
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-role-permissions-grid) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
 
-.mode-button-divider,
-:global(.byline-role-permissions-mode-button-divider) {
-  border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
-}
+  .row,
+  :global(.byline-role-permissions-row) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4) 0;
+  }
 
-.mode-button-disabled,
-:global(.byline-role-permissions-mode-button-disabled) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+  .label,
+  :global(.byline-role-permissions-label) {
+    min-width: 0;
+    flex: 1 1 0;
+    cursor: default;
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .toolbar,
-  :global(.byline-role-permissions-toolbar) {
-    border-color: var(--gray-700);
-    background-color: var(--canvas-800);
+  .label-edit,
+  :global(.byline-role-permissions-label-edit) {
+    cursor: pointer;
   }
 
-  .group,
-  :global(.byline-role-permissions-group) {
-    border-color: var(--gray-700);
+  .label-head,
+  :global(.byline-role-permissions-label-head) {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
   }
 
-  .group-head,
-  :global(.byline-role-permissions-group-head) {
-    border-bottom-color: var(--gray-700);
+  .label-name,
+  :global(.byline-role-permissions-label-name) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-medium);
   }
 
   .key,
   :global(.byline-role-permissions-key) {
-    background-color: var(--canvas-800);
+    background-color: var(--gray-100);
+    padding: 0.125rem 0.375rem;
+    font-size: var(--font-size-xs);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .description,
+  :global(.byline-role-permissions-description) {
+    margin-bottom: 0;
+    font-size: var(--font-size-xs);
   }
 
   .mode-toggle,
   :global(.byline-role-permissions-mode-toggle) {
-    border-color: var(--gray-700);
+    display: inline-flex;
+    overflow: hidden;
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+    border-radius: var(--border-radius-sm);
+  }
+
+  .mode-button,
+  :global(.byline-role-permissions-mode-button) {
+    padding: 0.125rem 0.625rem;
+    font-size: var(--font-size-xs);
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: background-color 150ms ease;
   }
 
   .mode-button:hover,
   :global(.byline-role-permissions-mode-button):hover {
-    background-color: var(--canvas-700);
+    background-color: var(--gray-50);
   }
 
   .mode-button-active,
   :global(.byline-role-permissions-mode-button-active) {
-    background-color: var(--canvas-700);
+    background-color: var(--gray-100);
+    font-weight: var(--font-weight-medium);
   }
 
   .mode-button-divider,
   :global(.byline-role-permissions-mode-button-divider) {
-    border-left-color: var(--gray-700);
+    border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  }
+
+  .mode-button-disabled,
+  :global(.byline-role-permissions-mode-button-disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :is([data-theme="dark"], :global(.dark)) {
+    .toolbar,
+    :global(.byline-role-permissions-toolbar) {
+      border-color: var(--gray-700);
+      background-color: var(--canvas-800);
+    }
+
+    .group,
+    :global(.byline-role-permissions-group) {
+      border-color: var(--gray-700);
+    }
+
+    .group-head,
+    :global(.byline-role-permissions-group-head) {
+      border-bottom-color: var(--gray-700);
+    }
+
+    .key,
+    :global(.byline-role-permissions-key) {
+      background-color: var(--canvas-800);
+    }
+
+    .mode-toggle,
+    :global(.byline-role-permissions-mode-toggle) {
+      border-color: var(--gray-700);
+    }
+
+    .mode-button:hover,
+    :global(.byline-role-permissions-mode-button):hover {
+      background-color: var(--canvas-700);
+    }
+
+    .mode-button-active,
+    :global(.byline-role-permissions-mode-button-active) {
+      background-color: var(--canvas-700);
+    }
+
+    .mode-button-divider,
+    :global(.byline-role-permissions-mode-button-divider) {
+      border-left-color: var(--gray-700);
+    }
   }
 }

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

package/src/modules/admin-users/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;
+
 /**
  * CreateAdminUser — drawer form for creating a new admin user.
  *
@@ -10,54 +24,56 @@
  *   .byline-user-create-action   — buttons in the actions row
  */
 
-.wrap,
-:global(.byline-user-create-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
-
-.form,
-:global(.byline-user-create-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
+@layer byline-components.cms {
+  .wrap,
+  :global(.byline-user-create-wrap) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4);
+    margin-top: var(--spacing-4);
+  }
 
-.grid,
-:global(.byline-user-create-grid) {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--spacing-16);
-}
+  .form,
+  :global(.byline-user-create-form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: var(--spacing-8);
+  }
 
-@media (min-width: 40rem) {
   .grid,
   :global(.byline-user-create-grid) {
-    grid-template-columns: 1fr 1fr;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--spacing-16);
   }
-}
 
-.flags,
-:global(.byline-user-create-flags) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-user-create-grid) {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
 
-.actions,
-:global(.byline-user-create-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
+  .flags,
+  :global(.byline-user-create-flags) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
+
+  .actions,
+  :global(.byline-user-create-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-16);
+  }
 
-.action,
-:global(.byline-user-create-action) {
-  min-width: 4rem;
+  .action,
+  :global(.byline-user-create-action) {
+    min-width: 4rem;
+  }
 }