@byline/admin 6.10.1 → 6.11.0

package/src/modules/admin-account/components/container.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;
+
 /**
  * AccountSelfContainer — self-service account dashboard with edit drawers.
  *
@@ -20,148 +34,150 @@
  *   .byline-account-drawer-skip   — sr-only "no action" focus shim
  */
 
-.grid,
-:global(.byline-account-grid) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  margin-bottom: var(--spacing-48);
-}
-
-@media (min-width: 40rem) {
+@layer byline-components.cms {
   .grid,
   :global(.byline-account-grid) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    margin-bottom: var(--spacing-48);
   }
-}
 
-.column,
-:global(.byline-account-column) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  margin-bottom: var(--spacing-16);
-}
+  @media (min-width: 40rem) {
+    .grid,
+    :global(.byline-account-grid) {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
 
-.section,
-:global(.byline-account-section) {
-  padding: var(--spacing-16);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  background-color: var(--canvas-25);
-  border-radius: var(--border-radius-sm);
-}
+  .column,
+  :global(.byline-account-column) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    margin-bottom: var(--spacing-16);
+  }
 
-.section-head,
-:global(.byline-account-section-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-8);
-}
+  .section,
+  :global(.byline-account-section) {
+    padding: var(--spacing-16);
+    border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    background-color: var(--canvas-25);
+    border-radius: var(--border-radius-sm);
+  }
 
-.line,
-:global(.byline-account-line) {
-  margin-bottom: 0;
-}
+  .section-head,
+  :global(.byline-account-section-head) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-8);
+  }
 
-.cta-line,
-:global(.byline-account-cta-line) {
-  margin-bottom: var(--spacing-12);
-}
+  .line,
+  :global(.byline-account-line) {
+    margin-bottom: 0;
+  }
 
-.meta,
-:global(.byline-account-meta) {
-  margin-top: var(--spacing-16);
-  font-size: var(--font-size-xs);
-}
+  .cta-line,
+  :global(.byline-account-cta-line) {
+    margin-bottom: var(--spacing-12);
+  }
 
-.status-on,
-:global(.byline-account-status-on) {
-  color: var(--green-600);
-}
+  .meta,
+  :global(.byline-account-meta) {
+    margin-top: var(--spacing-16);
+    font-size: var(--font-size-xs);
+  }
 
-.status-off,
-:global(.byline-account-status-off) {
-  color: var(--red-600);
-}
+  .status-on,
+  :global(.byline-account-status-on) {
+    color: var(--green-600);
+  }
 
-.status-help,
-:global(.byline-account-status-help) {
-  margin-top: var(--spacing-12);
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
-}
+  .status-off,
+  :global(.byline-account-status-off) {
+    color: var(--red-600);
+  }
 
-.preferences-theme,
-:global(.byline-account-preferences-theme) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-20);
-}
+  .status-help,
+  :global(.byline-account-status-help) {
+    margin-top: var(--spacing-12);
+    margin-bottom: 0;
+    font-size: var(--font-size-xs);
+  }
+
+  .preferences-theme,
+  :global(.byline-account-preferences-theme) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-20);
+  }
 
-/*
+  /*
  * Italic helper for "Not set" placeholders. Replaces the Tailwind
  * `italic` utility we used pre-lift; with the component now in a
  * published package, Tailwind's source scanner doesn't see the class
  * string in the host so the rule was never generated.
  */
-.not-set,
-:global(.byline-account-not-set) {
-  font-style: italic;
-}
-
-.drawer,
-:global(.byline-account-drawer) {
-  /* Width handled by uikit Drawer prop; no additional class needed today. */
-}
+  .not-set,
+  :global(.byline-account-not-set) {
+    font-style: italic;
+  }
 
-@media (min-width: 48rem) {
   .drawer,
   :global(.byline-account-drawer) {
-    width: 500px;
+    /* Width handled by uikit Drawer prop; no additional class needed today. */
   }
-}
 
-.drawer-body,
-:global(.byline-account-drawer-body) {
-  padding: var(--spacing-8);
-}
-
-.drawer-scroll,
-:global(.byline-account-drawer-scroll) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
+  @media (min-width: 48rem) {
+    .drawer,
+    :global(.byline-account-drawer) {
+      width: 500px;
+    }
+  }
 
-.drawer-skip,
-:global(.byline-account-drawer-skip) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+  .drawer-body,
+  :global(.byline-account-drawer-body) {
+    padding: var(--spacing-8);
+  }
 
-:is([data-theme="dark"], :global(.dark)) {
-  .section,
-  :global(.byline-account-section) {
-    border-color: var(--gray-700);
-    background-color: var(--canvas-800);
+  .drawer-scroll,
+  :global(.byline-account-drawer-scroll) {
+    max-height: calc(100vh - 160px);
+    overflow-y: auto;
   }
 
-  .status-on,
-  :global(.byline-account-status-on) {
-    color: var(--green-400);
+  .drawer-skip,
+  :global(.byline-account-drawer-skip) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
   }
 
-  .status-off,
-  :global(.byline-account-status-off) {
-    color: var(--red-400);
+  :is([data-theme="dark"], :global(.dark)) {
+    .section,
+    :global(.byline-account-section) {
+      border-color: var(--gray-700);
+      background-color: var(--canvas-800);
+    }
+
+    .status-on,
+    :global(.byline-account-status-on) {
+      color: var(--green-400);
+    }
+
+    .status-off,
+    :global(.byline-account-status-off) {
+      color: var(--red-400);
+    }
   }
 }

package/src/modules/admin-account/components/preferences.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;
+
 /**
  * Preferences — self-service account-preferences form (drawer body).
  *
@@ -11,50 +25,52 @@
  *   .byline-account-preferences-action  — buttons in the actions row
  */
 
-.wrap,
-:global(.byline-account-preferences-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-account-preferences-wrap) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+    padding: var(--spacing-4);
+    margin-top: var(--spacing-4);
+  }
 
-.form,
-:global(.byline-account-preferences-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
+  .form,
+  :global(.byline-account-preferences-form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
+    padding-top: var(--spacing-8);
+  }
 
-.row,
-:global(.byline-account-preferences-row) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
+  .row,
+  :global(.byline-account-preferences-row) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-4);
+  }
 
-.label,
-:global(.byline-account-preferences-label) {
-  font-weight: 500;
-}
+  .label,
+  :global(.byline-account-preferences-label) {
+    font-weight: 500;
+  }
 
-.help,
-:global(.byline-account-preferences-help) {
-  font-size: 0.875rem;
-}
+  .help,
+  :global(.byline-account-preferences-help) {
+    font-size: 0.875rem;
+  }
 
-.actions,
-:global(.byline-account-preferences-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
+  .actions,
+  :global(.byline-account-preferences-actions) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-8);
+    margin-top: var(--spacing-16);
+  }
 
-.action,
-:global(.byline-account-preferences-action) {
-  min-width: 4rem;
+  .action,
+  :global(.byline-account-preferences-action) {
+    min-width: 4rem;
+  }
 }

package/src/modules/admin-account/components/theme-switch.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;
+
 /**
  * This Source Code is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -6,7 +20,8 @@
  * Copyright (c) Infonomic Company Limited
  */
 
-/*
+@layer byline-components.cms {
+  /*
  * ThemeSwitch — the segmented control fills the card width; the help
  * line below it matches the muted helper styling used elsewhere on the
  * account cards.
@@ -17,21 +32,22 @@
  *   .byline-account-theme-help   — muted helper line
  */
 
-.wrap,
-:global(.byline-account-theme-switch) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-}
+  .wrap,
+  :global(.byline-account-theme-switch) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-8);
+  }
 
-.group,
-:global(.byline-account-theme-group) {
-  width: 100%;
-}
+  .group,
+  :global(.byline-account-theme-group) {
+    width: 100%;
+  }
 
-.help,
-:global(.byline-account-theme-help) {
-  margin-top: var(--spacing-4);
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
+  .help,
+  :global(.byline-account-theme-help) {
+    margin-top: var(--spacing-4);
+    margin-bottom: 0;
+    font-size: var(--font-size-xs);
+  }
 }

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