npm - @byline/ui - Versions diffs - 1.7.1 → 1.7.3 - Mend

@byline/ui 1.7.1 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/src/styles/styles.css CHANGED Viewed

@@ -1,12 +1,8 @@
-@layer byline-base,
-  byline-functional,
-  byline-utilities,
-  byline-theme,
-  byline-typography,
-  byline-components;
+@layer base, byline-base, components, byline-components,
+  byline-functional, utilities, byline-utilities,
+  theme, byline-theme, byline-typography;
 @import "./base/base.css";
 @import "./functional/functional.css";
-@import "./utils/utils.css";
 @import "./theme/theme.css";
 @import "./components/components.css";

package/src/styles/theme/autofill.css CHANGED Viewed

@@ -1,67 +1,58 @@
 @layer byline-theme {
-  /* input:-webkit-autofill, input:autofill,
-input:-webkit-autofill:hover, input:autofill:hover,
-input:-webkit-autofill:focus, input:autofill:focus,
-textarea:-webkit-autofill, textarea:autofill,
-textarea:-webkit-autofill:hover,textarea:autofill:hover,
-textarea:-webkit-autofill:focus,textarea:autofill:focus,
-select:-webkit-autofill, select:autofill,
-select:-webkit-autofill:hover,select:autofill:hover,
-select:-webkit-autofill:focus, select:autofill:focus {
-  border: none;
-  -webkit-text-fill-color: #ffb74d !important;
-  -webkit-box-shadow: none !important;
-  transition: background-color 5000s ease-in-out 0s;
-} */
+  /* Autofill styling is scoped — without this, host inputs outside the
+     admin area would also pick up the byline autofill colors. */
+  @scope (.byline-ui) {
+    input:autofill,
+    input:autofill:hover,
+    input:autofill:focus,
+    textarea:autofill,
+    textarea:autofill:hover,
+    textarea:autofill:focus,
+    select:autofill,
+    select:autofill:hover,
+    select:autofill:focus {
+      border: 1px solid #d89d3d;
+      -webkit-text-fill-color: black;
+      -webkit-box-shadow: 0 0 0px 1000px #fff2dc inset;
+      box-shadow: 0 0 0px 1000px #fff2dc inset;
+      transition: background-color 5000s ease-in-out 0s;
+      color: black;
+      background-color: rgb(250, 217, 167);
+    }
-  input:autofill,
-  input:autofill:hover,
-  input:autofill:focus,
-  textarea:autofill,
-  textarea:autofill:hover,
-  textarea:autofill:focus,
-  select:autofill,
-  select:autofill:hover,
-  select:autofill:focus {
-    border: 1px solid #d89d3d;
-    -webkit-text-fill-color: black;
-    -webkit-box-shadow: 0 0 0px 1000px #fff2dc inset;
-    box-shadow: 0 0 0px 1000px #fff2dc inset;
-    transition: background-color 5000s ease-in-out 0s;
-    color: black;
-    background-color: rgb(250, 217, 167);
-  }
-  /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
-   * We rely on the consuming application to detect a user's preferred
-   * color scheme - either by header or cookie, and set a root html
-   * class or data attribute accordingly.
-   */
+    /* 🌙 Dark via `.dark` class or [data-theme="dark"] attribute.
+     * We rely on the consuming application to detect a user's preferred
+     * color scheme - either by header or cookie, and set a root html
+     * class or data attribute accordingly. The .dark/[data-theme="dark"]
+     * ancestor lives outside the scope (typically on <html>); that's fine
+     * because the scope constraint applies to the matched input/textarea/select.
+     */
-  .dark input:autofill,
-  .dark input:autofill:hover,
-  .dark input:autofill:focus,
-  .dark textarea:autofill,
-  .dark textarea:autofill:hover,
-  .dark textarea:autofill:focus,
-  .dark select:autofill,
-  .dark select:autofill:hover,
-  .dark select:autofill:focus,
-  [data-theme="dark"] input:autofill,
-  [data-theme="dark"] input:autofill:hover,
-  [data-theme="dark"] input:autofill:focus,
-  [data-theme="dark"] textarea:autofill,
-  [data-theme="dark"] textarea:autofill:hover,
-  [data-theme="dark"] textarea:autofill:focus,
-  [data-theme="dark"] select:autofill,
-  [data-theme="dark"] select:autofill:hover,
-  [data-theme="dark"] select:autofill:focus {
-    border: 1px solid var(--theme-600);
-    -webkit-text-fill-color: white;
-    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-    box-shadow: 0 0 0px 1000px var(--theme-600) inset;
-    transition: background-color 5000s ease-in-out 0s;
-    color: white;
-    background-color: rgba(100, 100, 100, 0.5);
+    .dark input:autofill,
+    .dark input:autofill:hover,
+    .dark input:autofill:focus,
+    .dark textarea:autofill,
+    .dark textarea:autofill:hover,
+    .dark textarea:autofill:focus,
+    .dark select:autofill,
+    .dark select:autofill:hover,
+    .dark select:autofill:focus,
+    [data-theme="dark"] input:autofill,
+    [data-theme="dark"] input:autofill:hover,
+    [data-theme="dark"] input:autofill:focus,
+    [data-theme="dark"] textarea:autofill,
+    [data-theme="dark"] textarea:autofill:hover,
+    [data-theme="dark"] textarea:autofill:focus,
+    [data-theme="dark"] select:autofill,
+    [data-theme="dark"] select:autofill:hover,
+    [data-theme="dark"] select:autofill:focus {
+      border: 1px solid var(--theme-600);
+      -webkit-text-fill-color: white;
+      -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      box-shadow: 0 0 0px 1000px var(--theme-600) inset;
+      transition: background-color 5000s ease-in-out 0s;
+      color: white;
+      background-color: rgba(100, 100, 100, 0.5);
+    }
   }
 }

package/src/styles/theme/defaults.css CHANGED Viewed

@@ -4,72 +4,84 @@
  * Opinionated starter styles for HTML elements to provide sensible defaults
  * for new installations. These live in the byline-theme layer and are
  * easily overridden by consuming applications.
+ *
+ * Scoped to .byline-ui so the host's bare elements are untouched. The bare
+ * element selectors inside @scope match only elements within the boundary;
+ * `:scope` alone targets the scope root specifically.
+ *
+ * Note: `.dark X { ... }` selectors do NOT carry a `:scope` prefix on
+ * purpose. The scope constraint applies to the *matched element* (X must
+ * be in scope); the ancestor `.dark` can be anywhere — including on
+ * <html>, which is outside the scope in admin-only mode. That's exactly
+ * the behaviour we want.
  */
 @layer byline-theme {
-  html {
-    font-size: 1rem;
-    color: var(--text);
-  }
+  @scope (.byline-ui) {
+    :scope {
+      font-size: 1rem;
+      color: var(--text);
+    }
-  /* Redeclared here to change the specificity and scope of --prose-body */
-  html .not-dark {
-    color: var(--text);
-  }
+    /* Redeclared here to change the specificity and scope of --prose-body */
+    .not-dark {
+      color: var(--text);
+    }
-  /* Default (light mode) */
-  ::selection {
-    background-color: var(--theme-600);
-    color: white;
-  }
+    /* Default (light mode) */
+    ::selection {
+      background-color: var(--theme-600);
+      color: white;
+    }
-  /* Dark mode */
-  .dark ::selection,
-  [data-theme="dark"] ::selection {
-    background-color: var(--theme-200);
-    color: var(--gray-900);
-  }
+    /* Dark mode — .dark/[data-theme="dark"] is typically on <html>, outside scope */
+    .dark ::selection,
+    [data-theme="dark"] ::selection {
+      background-color: var(--theme-200);
+      color: var(--gray-900);
+    }
-  /* Headings */
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
+    /* Headings */
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      line-height: 1.125;
+    }
-  h2 {
-    font-size: 1.5rem;
-    font-weight: 600;
-    line-height: 1.125;
-  }
+    h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      line-height: 1.125;
+    }
-  h3 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
+    h3 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.1;
+    }
-  h4 {
-    font-size: 1rem;
-    font-weight: 600;
-    line-height: 1.1;
-  }
+    h4 {
+      font-size: 1rem;
+      font-weight: 600;
+      line-height: 1.1;
+    }
-  /* External link indicator */
-  .external-link::after {
-    content: "";
-    display: inline-block;
-    background-image: url("/external-link-light.svg");
-    background-repeat: no-repeat;
-    background-position: 20% 50%;
-    background-size: 65% auto;
-    width: 1.1rem;
-    height: 1.1rem;
-    margin-right: -5px;
-  }
+    /* External link indicator */
+    .external-link::after {
+      content: "";
+      display: inline-block;
+      background-image: url("/external-link-light.svg");
+      background-repeat: no-repeat;
+      background-position: 20% 50%;
+      background-size: 65% auto;
+      width: 1.1rem;
+      height: 1.1rem;
+      margin-right: -5px;
+    }
-  .dark .external-link::after,
-  [data-theme="dark"] .external-link::after {
-    background-image: url("/external-link-dark.svg");
+    .dark .external-link::after,
+    [data-theme="dark"] .external-link::after {
+      background-image: url("/external-link-dark.svg");
+    }
   }
 }

package/src/styles/theme/scrollers.css CHANGED Viewed

@@ -1,4 +1,7 @@
 @layer byline-theme {
+  /* Custom property declarations stay on :root so they cascade everywhere.
+     They don't conflict with host CSS and are read by .component--scroller
+     instances anywhere in the tree. */
   :root {
     --scroll-bar-thumb: var(--theme-400);
     --scroll-bar-track: var(--theme-600);
@@ -11,44 +14,50 @@
     --scroll-bar-track: var(--canvas-900);
   }
-  /* For Google Chrome */
-  ::-webkit-scrollbar {
-    width: 0.6em;
-    height: 0.6em;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: var(--scroll-bar-thumb);
-  }
-  ::-webkit-scrollbar-track {
-    background: var(--scroll-bar-track);
-  }
-  ::-webkit-scrollbar-corner {
-    background: var(--scroll-bar-track);
-  }
-  /* Firefox */
-  html {
-    scrollbar-width: thin;
-    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
-  }
-  .component--scroller {
-    --scroll-bar-thumb: var(--scroll-bar-thumb);
-    --scroll-bar-track: var(--scroll-bar-track);
-  }
-  .dark .component--scroller,
-  [data-theme="dark"] .component--scroller {
-    --scroll-bar-thumb: var(--scroll-bar-thumb);
-    --scroll-bar-track: var(--scroll-bar-track);
-  }
-  .component--scroller {
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+  /* Scrollbar styling itself is scoped to .byline-ui — without this, the
+     ::-webkit-scrollbar pseudo-elements would re-style the host page's
+     scrollbars too. */
+  @scope (.byline-ui) {
+    /* For Google Chrome */
+    ::-webkit-scrollbar {
+      width: 0.6em;
+      height: 0.6em;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--scroll-bar-thumb);
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--scroll-bar-track);
+    }
+    ::-webkit-scrollbar-corner {
+      background: var(--scroll-bar-track);
+    }
+    /* Firefox — applied to the scope root (html in whole-app mode, the
+       wrapper div in admin-only mode) */
+    :scope {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+    }
+    .component--scroller {
+      --scroll-bar-thumb: var(--scroll-bar-thumb);
+      --scroll-bar-track: var(--scroll-bar-track);
+    }
+    .dark .component--scroller,
+    [data-theme="dark"] .component--scroller {
+      --scroll-bar-thumb: var(--scroll-bar-thumb);
+      --scroll-bar-track: var(--scroll-bar-track);
+    }
+    .component--scroller {
+      overflow-y: auto;
+      scrollbar-width: thin;
+      scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+    }
   }
 }