@netlify/spark-ui 1.19.0 → 1.20.0

package/packages/components/TabbedContent.astro

@@ -17,8 +17,8 @@ const { id, class: className, ...rest } = Astro.props;
   .n-tabbed-content {
     --_border-size: 1px;
     --_border-style: solid;
-    --_border-color-inactive: var(--color-bg-3);
-    --_border-color-active: var(--color-icon);
+    --_border-color-inactive: var(--ntl-color-bg-3);
+    --_border-color-active: var(--ntl-color-icon);
     display: block;
     isolation: isolate;
   }
@@ -37,17 +37,17 @@ const { id, class: className, ...rest } = Astro.props;
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--space-xs);
+    gap: var(--ntl-space-xs);
     text-wrap: nowrap;
     outline-offset: -1px;
-    padding: var(--space-xs) var(--space-s);
-    font-family: var(--font-family-display);
-    font-size: var(--font-size-text-lg);
-    font-weight: var(--font-weight-semibold);
-    line-height: var(--line-height-heading);
+    padding: var(--ntl-space-xs) var(--ntl-space-s);
+    font-family: var(--ntl-font-family-display);
+    font-size: var(--ntl-font-size-text-lg);
+    font-weight: var(--ntl-font-weight-semibold);
+    line-height: var(--ntl-line-height-heading);
     text-align: center;
-    color: var(--body-text-color);
-    background: var(--tabbed-content-bg-color);
+    color: var(--ntl-body-text-color);
+    background: var(--ntl-tabbed-content-bg-color);
     border: var(--_border-size) var(--_border-style) var(--_border-color-inactive);
     border-radius: 0;
     border-block-end: unset;
@@ -59,12 +59,12 @@ const { id, class: className, ...rest } = Astro.props;
     }
 
     &[aria-selected='true'] {
-      --_radius: var(--radius-s);
-      color: var(--tabbed-content-tab-text-color-active);
+      --_radius: var(--ntl-radius-s);
+      color: var(--ntl-tabbed-content-tab-text-color-active);
       border-top-left-radius: var(--_radius);
       border-top-right-radius: var(--_radius);
       border-color: var(--_border-color-active);
-      background: var(--tabbed-content-bg-color-active);
+      background: var(--ntl-tabbed-content-bg-color-active);
       z-index: 1;
     }
   }

package/packages/components/TabbedContentPanel.astro

@@ -37,7 +37,7 @@ const {
 
 <TabPanel id={id} class:list={['n-tabbed-content-panel', className]} isHidden={isHidden} {...rest}>
   <div class:list={['n-tabbed-content-wrapper', codeBlock && 'n-tabbed-content-wrapper-split']}>
-    <div class="n-tabbed-content-body n-flow">
+    <div class="n-tabbed-content-body ntl-flow">
       {heading && <h3 class="h4">{heading}</h3>}
       {text && <p set:html={text} />}
       {
@@ -101,7 +101,7 @@ const {
     display: grid;
     gap: var(--_border-size);
     height: 100%;
-    background-color: var(--color-icon); /** Shows through grid gaps to create inner borders */
+    background-color: var(--ntl-color-icon); /** Shows through grid gaps to create inner borders */
 
     @container (width > 55rem) {
       grid-template-columns: 1fr 1fr;
@@ -109,26 +109,26 @@ const {
   }
 
   .n-tabbed-content-body {
-    padding: var(--space-xl);
-    background-color: var(--card-bg-color);
+    padding: var(--ntl-space-xl);
+    background-color: var(--ntl-card-bg-color);
   }
 
   .n-tabbed-content-code {
     display: grid;
     grid-template-rows: auto 1fr;
     gap: var(--_border-size);
-    background-color: var(--tabbed-content-code-bg-color);
+    background-color: var(--ntl-tabbed-content-code-bg-color);
   }
 
   .n-tabbed-content-code-heading {
     display: flex;
-    gap: var(--space-xs);
+    gap: var(--ntl-space-xs);
     align-items: center;
-    padding: var(--space-xs);
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-text-md);
+    padding: var(--ntl-space-xs);
+    font-family: var(--ntl-font-family-mono);
+    font-size: var(--ntl-font-size-text-md);
     text-transform: uppercase;
-    background-color: var(--tabbed-content-code-bg-color);
+    background-color: var(--ntl-tabbed-content-code-bg-color);
     border-block-end: var(--_border-size) var(--_border-style) var(--_border-color-active);
   }
 
@@ -139,15 +139,15 @@ const {
   }
 
   .n-tabbed-content-code-block {
-    --n-code-block-border: none;
-    --n-code-block-radius: 0;
-    --n-code-bg-color: var(--tabbed-content-code-bg-color);
+    --ntl-code-block-border: none;
+    --ntl-code-block-radius: 0;
+    --ntl-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
     flex-grow: 1;
   }
 
   .n-tabbed-content-ctas {
     display: grid;
-    gap: var(--space-s);
+    gap: var(--ntl-space-s);
   }
 
   @media (min-width: 30rem) {

package/packages/components/TestimonialSlider.astro

@@ -18,7 +18,7 @@ const { items } = Astro.props as Props;
 ---
 
 <Tabs class="n-testimonial-slider">
-  <TabList class="n-testimonial-logos n-cluster">
+  <TabList class="n-testimonial-logos ntl-cluster">
     {
       items?.map(({ company, logoSrc }, index) => (
         <Tab
@@ -35,7 +35,7 @@ const { items } = Astro.props as Props;
   {
     items?.map((testimonial, index) => (
       <TabPanel>
-        <div class="n-testimonial-quote-body n-flow">
+        <div class="n-testimonial-quote-body ntl-flow">
           <Blockquote
             variant="testimonial"
             aria-hidden={index !== 0}
@@ -64,15 +64,15 @@ const { items } = Astro.props as Props;
   @import url('../styles/animations.css');
 
   .n-testimonial-slider {
-    --_spacing: var(--space-xl);
+    --_spacing: var(--ntl-space-xl);
   }
 
   .n-testimonial-quote-body {
-    --n-flow-space: var(--_spacing);
+    --ntl-flow-space: var(--_spacing);
   }
 
   .n-testimonial-logos {
-    --n-cluster-column-gap: var(--space-l);
+    --ntl-cluster-column-gap: var(--ntl-space-l);
   }
 
   [role='tablist'] {
@@ -96,15 +96,15 @@ const { items } = Astro.props as Props;
   .n-logo-btn :global(svg) {
     width: 6.25rem;
     height: auto;
-    fill: var(--testimonial-logo-inactive-color);
+    fill: var(--ntl-testimonial-logo-inactive-color);
     transition: fill 300ms ease-out;
   }
 
   .n-logo-btn:hover :global(svg) {
-    fill: var(--testimonial-logo-hover-color);
+    fill: var(--ntl-testimonial-logo-hover-color);
   }
 
   .n-logo-btn[aria-selected='true'] :global(svg) {
-    fill: var(--blockquote-accent-color);
+    fill: var(--ntl-blockquote-accent-color);
   }
 </style>

package/packages/components/Ticker.astro

@@ -54,7 +54,7 @@ const customStyles =
 
 <style>
   .n-ticker {
-    --_gap: var(--n-ticker-gap, var(--space-s));
+    --_gap: var(--n-ticker-gap, var(--ntl-space-s));
     display: flex;
     flex-direction: var(--n-ticker-direction, row);
     overflow: hidden;

package/packages/components/TrustBarTicker.astro

@@ -15,7 +15,7 @@ const { as, pauseOnHover, reverse, id, class: className, ...rest } = Astro.props
 <Ticker
   as={as}
   id={id}
-  gap="var(--space-2xl)"
+  gap="var(--ntl-space-2xl)"
   pauseOnHover={pauseOnHover}
   reverse={reverse}
   speed={50}

package/packages/components/TrustBarTickerItem.astro

@@ -29,17 +29,17 @@ const { as: Element = 'div', id, iconSrc, text, class: className, ...rest } = As
   .n-trust-bar-ticker-item {
     display: flex;
     align-items: center;
-    gap: var(--space-xs);
+    gap: var(--ntl-space-xs);
   }
 
   .n-trust-bar-ticker-item-icon {
     flex-shrink: 0;
     aspect-ratio: 1;
-    padding: var(--space-3xs);
+    padding: var(--ntl-space-3xs);
     inline-size: 2.5rem;
     border-radius: 50%;
-    border: 1px solid var(--color-stroke);
-    background: var(--code-bg-color);
+    border: 1px solid var(--ntl-color-stroke);
+    background: var(--ntl-code-bg-color);
   }
 
   .n-trust-bar-ticker-item-content :global(:where(img, picture, svg)) {
@@ -47,6 +47,6 @@ const { as: Element = 'div', id, iconSrc, text, class: className, ...rest } = As
     height: auto;
     max-height: 4rem;
     object-fit: contain;
-    filter: var(--filter-invert);
+    filter: var(--ntl-filter-invert);
   }
 </style>

package/packages/components/preact/AskNetlify/components/ActionBar.tsx

@@ -1,6 +1,6 @@
 import Icon from '@components/preact/Icon';
 import Popover from '@components/preact/Popover/Popover';
-import Analytics from '@analtyics/analytics';
+import Analytics from '@analytics/analytics';
 
 interface ActionBarProps {
   answer: string;

package/packages/styles/base.css

@@ -1,5 +1,6 @@
 @import 'reset.css';
 @import 'tokens.css';
+@import 'tokens.compat.css';
 @import 'utils.css';
 @import 'fonts.css';
 @import 'layout.css';

package/packages/styles/layout.compat.css

@@ -0,0 +1,114 @@
+/**
+ * Layout Backwards Compatibility
+ *
+ * Maps old `.n-` prefixed layout utility class names to the new `.ntl-` prefixed equivalents.
+ * Also aliases old `--n-` CSS custom properties to their `--ntl-` counterparts.
+ *
+ * Import this file alongside layout.css if your project still uses the old class names:
+ *
+ *   @import '@netlify/spark-ui/styles/layout.css';
+ *   @import '@netlify/spark-ui/styles/layout.compat.css';
+ *
+ * Remove this import once all references have been migrated to the `ntl-` prefix.
+ */
+
+/* Class aliases */
+
+.n-cluster {
+  --_gap-default: var(--space-m);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: var(--ntl-cluster-align, var(--n-cluster-align, center));
+  justify-content: var(--ntl-cluster-justify, var(--n-cluster-justify, flex-start));
+  column-gap: var(--ntl-cluster-column-gap, var(--n-cluster-column-gap, var(--ntl-cluster-gap, var(--n-cluster-gap, var(--_gap-default)))));
+  row-gap: var(--ntl-cluster-row-gap, var(--n-cluster-row-gap, var(--ntl-cluster-gap, var(--n-cluster-gap, var(--_gap-default)))));
+}
+
+.n-flow {
+  display: flex;
+  flex-direction: column;
+  justify-content: var(--ntl-flow-justify, var(--n-flow-justify, flex-start));
+  align-items: var(--ntl-flow-align, var(--n-flow-align, flex-start));
+
+  > * + * {
+    margin-block-start: var(--ntl-flow-space, var(--n-flow-space, var(--space-m)));
+  }
+}
+
+.n-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    var(--ntl-grid-repeat-count, var(--n-grid-repeat-count, auto-fill)),
+    minmax(min(100%, var(--ntl-grid-column-min-size, var(--n-grid-column-min-size))), 1fr)
+  );
+  gap: var(--ntl-grid-gap, var(--n-grid-gap, var(--space-m)));
+  grid-auto-rows: var(--ntl-grid-auto-rows, var(--n-grid-auto-rows, auto));
+}
+
+.n-flex-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ntl-grid-gap, var(--n-grid-gap, var(--space-m)));
+
+  > * {
+    flex: 1 1 var(--ntl-grid-column-min-size, var(--n-grid-column-min-size));
+  }
+}
+
+.n-stack {
+  display: grid;
+  grid-template-areas: 'stack';
+
+  > * {
+    grid-area: stack;
+  }
+}
+
+.n-sidebar-left,
+.n-sidebar-right {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: var(--ntl-sidebar-direction, var(--n-sidebar-direction, initial));
+  align-items: var(--ntl-sidebar-align, var(--n-sidebar-align, initial));
+  justify-content: var(--ntl-sidebar-justify, var(--n-sidebar-justify, initial));
+  gap: var(--ntl-sidebar-row-gap, var(--n-sidebar-row-gap, var(--ntl-sidebar-gap, var(--n-sidebar-gap, var(--space-m)))))
+    var(--ntl-sidebar-column-gap, var(--n-sidebar-column-gap, var(--ntl-sidebar-gap, var(--n-sidebar-gap, var(--space-m)))));
+}
+
+.n-sidebar-left > :first-child,
+.n-sidebar-right > :last-child {
+  flex-basis: var(--ntl-sidebar-size, var(--n-sidebar-size, initial));
+  flex-grow: 1;
+}
+
+.n-sidebar-left > :last-child,
+.n-sidebar-right > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--ntl-sidebar-min, var(--n-sidebar-min, 60%));
+}
+
+.n-breakout {
+  --_full: minmax(var(--page-gutter), 1fr);
+  --_content: min(
+    var(--ntl-breakout-max, var(--n-breakout-max, var(--page-content-max-width))),
+    100% - var(--page-gutter) * 2
+  );
+  --_popout: minmax(0, 2rem);
+  --_feature: minmax(0, 5rem);
+
+  display: grid;
+  place-content: start;
+  grid-template-columns:
+    [full-start] var(--_full)
+    [feature-start] var(--_feature)
+    [popout-start] var(--_popout)
+    [content-start] var(--_content) [content-end]
+    var(--_popout) [popout-end]
+    var(--_feature) [feature-end]
+    var(--_full) [full-end];
+}
+
+.n-breakout > * {
+  grid-column: var(--ntl-breakout-area, var(--n-breakout-area, content));
+}

package/packages/styles/layout.css

@@ -1,45 +1,45 @@
-.n-cluster {
+.ntl-cluster {
   --_gap-default: var(--space-m);
   display: flex;
   flex-wrap: wrap;
-  align-items: var(--n-cluster-align, center);
-  justify-content: var(--n-cluster-justify, flex-start);
-  column-gap: var(--n-cluster-column-gap, var(--n-cluster-gap, var(--_gap-default)));
-  row-gap: var(--n-cluster-row-gap, var(--n-cluster-gap, var(--_gap-default)));
+  align-items: var(--ntl-cluster-align, center);
+  justify-content: var(--ntl-cluster-justify, flex-start);
+  column-gap: var(--ntl-cluster-column-gap, var(--ntl-cluster-gap, var(--_gap-default)));
+  row-gap: var(--ntl-cluster-row-gap, var(--ntl-cluster-gap, var(--_gap-default)));
 }
 
-.n-flow {
+.ntl-flow {
   display: flex;
   flex-direction: column;
-  justify-content: var(--n-flow-justify, flex-start);
-  align-items: var(--n-flow-align, flex-start);
+  justify-content: var(--ntl-flow-justify, flex-start);
+  align-items: var(--ntl-flow-align, flex-start);
 
   > * + * {
-    margin-block-start: var(--n-flow-space, var(--space-m));
+    margin-block-start: var(--ntl-flow-space, var(--space-m));
   }
 }
 
-.n-grid {
+.ntl-grid {
   display: grid;
   grid-template-columns: repeat(
-    var(--n-grid-repeat-count, auto-fill),
-    minmax(min(100%, var(--n-grid-column-min-size)), 1fr)
+    var(--ntl-grid-repeat-count, auto-fill),
+    minmax(min(100%, var(--ntl-grid-column-min-size)), 1fr)
   );
-  gap: var(--n-grid-gap, var(--space-m));
-  grid-auto-rows: var(--n-grid-auto-rows, auto);
+  gap: var(--ntl-grid-gap, var(--space-m));
+  grid-auto-rows: var(--ntl-grid-auto-rows, auto);
 }
 
-.n-flex-grid {
+.ntl-flex-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--n-grid-gap, var(--space-m));
+  gap: var(--ntl-grid-gap, var(--space-m));
 
   > * {
-    flex: 1 1 var(--n-grid-column-min-size);
+    flex: 1 1 var(--ntl-grid-column-min-size);
   }
 }
 
-.n-stack {
+.ntl-stack {
   display: grid;
   grid-template-areas: 'stack';
 
@@ -48,34 +48,34 @@
   }
 }
 
-.n-sidebar-left,
-.n-sidebar-right {
+.ntl-sidebar-left,
+.ntl-sidebar-right {
   display: flex;
   flex-wrap: wrap;
-  flex-direction: var(--n-sidebar-direction, initial);
-  align-items: var(--n-sidebar-align, initial);
-  justify-content: var(--n-sidebar-justify, initial);
-  gap: var(--n-sidebar-row-gap, var(--n-sidebar-gap, var(--space-m)))
-    var(--n-sidebar-column-gap, var(--n-sidebar-gap, var(--space-m)));
+  flex-direction: var(--ntl-sidebar-direction, initial);
+  align-items: var(--ntl-sidebar-align, initial);
+  justify-content: var(--ntl-sidebar-justify, initial);
+  gap: var(--ntl-sidebar-row-gap, var(--ntl-sidebar-gap, var(--space-m)))
+    var(--ntl-sidebar-column-gap, var(--ntl-sidebar-gap, var(--space-m)));
 }
 
-.n-sidebar-left > :first-child,
-.n-sidebar-right > :last-child {
-  flex-basis: var(--n-sidebar-size, initial);
+.ntl-sidebar-left > :first-child,
+.ntl-sidebar-right > :last-child {
+  flex-basis: var(--ntl-sidebar-size, initial);
   flex-grow: 1;
 }
 
-.n-sidebar-left > :last-child,
-.n-sidebar-right > :first-child {
+.ntl-sidebar-left > :last-child,
+.ntl-sidebar-right > :first-child {
   flex-basis: 0;
   flex-grow: 999;
-  min-inline-size: var(--n-sidebar-min, 60%);
+  min-inline-size: var(--ntl-sidebar-min, 60%);
 }
 
-.n-breakout {
+.ntl-breakout {
   --_full: minmax(var(--page-gutter), 1fr);
   --_content: min(
-    var(--n-breakout-max, var(--page-content-max-width)),
+    var(--ntl-breakout-max, var(--page-content-max-width)),
     100% - var(--page-gutter) * 2
   );
   --_popout: minmax(0, 2rem);
@@ -93,6 +93,6 @@
     var(--_full) [full-end];
 }
 
-.n-breakout > * {
-  grid-column: var(--n-breakout-area, content);
+.ntl-breakout > * {
+  grid-column: var(--ntl-breakout-area, content);
 }