@netlify/spark-ui 1.5.0 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/Switchback.astro

@@ -0,0 +1,129 @@
+---
+import { CallToActionProps } from '@utils/types';
+import Eyebrow from './Eyebrow.astro';
+import ActionLink from './ActionLink.astro';
+
+interface Props {
+  id?: string;
+  class?: string;
+  isReversed?: boolean;
+  eyebrow?: string;
+  heading?: string;
+  text?: string;
+  list?: string[];
+  cta?: CallToActionProps;
+  mediaPattern?: 1 | 2;
+}
+
+const {
+  eyebrow,
+  heading,
+  text,
+  list,
+  cta,
+  isReversed,
+  mediaPattern = 1,
+  id,
+  class: className,
+  ...rest
+} = Astro.props;
+---
+
+<div
+  id={id}
+  class:list={['n-switchback n-sidebar-left', isReversed && 'n-switchback-reversed', className]}
+  data-theme="dark"
+  {...rest}
+>
+  <div class="n-switchback-content n-flow">
+    {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
+    {heading && <h3 class="n-switchback-heading h5">{heading}</h3>}
+    {text && <p class="text" set:html={text} />}
+    {
+      list && list.length > 0 && (
+        <ul data-list-variant="contained">
+          {list.map((item: string) => (
+            <li>{item}</li>
+          ))}
+        </ul>
+      )
+    }
+    {
+      cta && (
+        <div class="n-switchback-cta">
+          <ActionLink id={cta.id} href={cta.href}>
+            {cta.text}
+          </ActionLink>
+        </div>
+      )
+    }
+  </div>
+  {
+    Astro.slots.has('media') && (
+      <div class="n-switchback-media" data-switchback-media-pattern={mediaPattern}>
+        <slot name="media" />
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .n-switchback {
+    --n-sidebar-size: 25rem;
+    --n-sidebar-min: 50%;
+    --n-sidebar-gap: 0;
+    overflow: hidden;
+    color: var(--color-text);
+    background: linear-gradient(
+      var(--n-switchback-gradient-angle, 101deg),
+      #0d1818 8.17%,
+      #0c2a2a 56.72%
+    );
+    border: 1px solid rgba(208, 255, 254, 0.2);
+    border-radius: var(--radius-m);
+  }
+
+  .n-switchback-reversed {
+    --n-switchback-gradient-angle: 248deg;
+    flex-direction: row-reverse;
+  }
+
+  .n-switchback-content {
+    padding: var(--space-l);
+  }
+
+  .n-switchback-heading {
+    color: var(--heading-text-color);
+  }
+
+  .n-switchback-media {
+    display: grid;
+    place-items: center;
+    padding: var(--space-xl);
+    background: var(--red-400);
+    min-height: 10rem;
+
+    :is(img, picture) {
+      max-width: 100%;
+      height: auto;
+      object-fit: cover;
+    }
+  }
+
+  /** Patterns */
+  [data-switchback-media-pattern='1'] {
+    background:
+      url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzY5IiBoZWlnaHQ9IjQ5MCIgdmlld0JveD0iMCAwIDc2OSA0OTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjM4NC4zMjQiIHk9IjEwLjc1NDciIHdpZHRoPSIzMzEuMTY0IiBoZWlnaHQ9IjMzMS4xNjQiIHRyYW5zZm9ybT0icm90YXRlKDQ1IDM4NC4zMjQgMTAuNzU0NykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNjIxLjMyNCIgeT0iNy45MjI4NSIgd2lkdGg9IjQ3NCIgaGVpZ2h0PSI0NzQiIHRyYW5zZm9ybT0icm90YXRlKDkwIDYyMS4zMjQgNy45MjI4NSkiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iODU5LjEwMSIgeT0iMjQ0LjkyMyIgd2lkdGg9IjY3MS40MzYiIGhlaWdodD0iNjcxLjQzNiIgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDg1OS4xMDEgMjQ0LjkyMykiIHN0cm9rZT0id2hpdGUiLz4KPHJlY3QgeD0iNTAxLjUwNCIgeT0iMTI3Ljc0MyIgd2lkdGg9IjIzNC4zNTkiIGhlaWdodD0iMjM0LjM1OSIgdHJhbnNmb3JtPSJyb3RhdGUoOTAgNTAxLjUwNCAxMjcuNzQzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI1MDEuMjk3IiB5PSIyNDQuOTIzIiB3aWR0aD0iMTY1LjQyMyIgaGVpZ2h0PSIxNjUuNDIzIiB0cmFuc2Zvcm09InJvdGF0ZSgxMzUgNTAxLjI5NyAyNDQuOTIzKSIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cmVjdCB4PSI0NDMuNTA0IiB5PSIzMDQuMTAzIiB3aWR0aD0iMTE4LjM2MSIgaGVpZ2h0PSIxMTguMzYxIiB0cmFuc2Zvcm09InJvdGF0ZSgtMTgwIDQ0My41MDQgMzA0LjEwMykiIHN0cm9rZT0id2hpdGUiLz4KPC9zdmc+Cg=='),
+      radial-gradient(circle at 50% 70%, var(--red-500) 0%, var(--purple-300) 100%);
+    background-size: cover;
+    background-position: center;
+  }
+
+  [data-switchback-media-pattern='2'] {
+    background:
+      repeating-linear-gradient(-30deg, var(--red-000) 0 1px, transparent 1px 150px),
+      radial-gradient(circle at 10% 70%, var(--blue-500) 0%, var(--teal-200) 100%);
+    background-size: cover;
+    background-position: center;
+  }
+</style>

package/packages/styles/fonts.css

@@ -114,7 +114,14 @@ h3,
 h4,
 .h4 {
   font-size: var(--font-size-display-sm);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-heading);
+}
+
+h5,
+.h5 {
+  font-size: var(--font-size-display-xs);
+  font-weight: var(--font-weight-bold);
   line-height: var(--line-height-heading);
 }
 
@@ -153,6 +160,23 @@ ol li::marker {
   }
 }
 
+[data-list-variant='contained'] {
+  list-style: none;
+  padding: 0;
+  width: 100%;
+
+  li {
+    padding: var(--space-s);
+    border-radius: var(--radius-s);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(233, 235, 237, 0.1);
+  }
+
+  li + li {
+    margin-block-start: var(--space-s);
+  }
+}
+
 /* Code */
 pre,
 code,

package/packages/styles/layout.css

@@ -38,8 +38,8 @@
   }
 }
 
-.n-sidebar-first,
-.n-sidebar-last {
+.n-sidebar-left,
+.n-sidebar-right {
   display: flex;
   flex-wrap: wrap;
   flex-direction: var(--n-sidebar-direction, initial);
@@ -49,14 +49,14 @@
     var(--n-sidebar-column-gap, var(--n-sidebar-gap, var(--space-m)));
 }
 
-.n-sidebar-first > :first-child,
-.n-sidebar-last > :last-child {
+.n-sidebar-left > :first-child,
+.n-sidebar-right > :last-child {
   flex-basis: var(--n-sidebar-size, initial);
   flex-grow: 1;
 }
 
-.n-sidebar-first > :last-child,
-.n-sidebar-last > :first-child {
+.n-sidebar-left > :last-child,
+.n-sidebar-right > :first-child {
   flex-basis: 0;
   flex-grow: 999;
   min-inline-size: var(--n-sidebar-min, 60%);