@netlify/spark-ui 1.5.0-alpha.8 → 1.5.0

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -4,18 +4,15 @@
 
 /* Root Variables */
 .n-search-modal {
-  --n-search-padding-inline: var(--space-s);
-  --n-search-color-text: var(--color-text-1, currentColor);
-  --n-search-color-text-secondary: var(--color-text-weaker, currentColor);
+  --n-search-padding-inline: 0.5em;
+  --n-search-color-text: var(--color-text, currentColor);
+  --n-search-color-text-secondary: var(--color-text-weak, currentColor);
   --n-search-color-bg: var(--search-bg-color);
-  --n-search-color-bg-2: var(--color-bg-3);
+  --n-search-color-bg-2: var(--color-bg-2);
   --n-search-color-border: var(--color-bg-3);
-  --n-search-border-radius: 1.3rem;
+  --n-search-border-radius: 8px;
   --n-search-max-w: 600px;
   --n-search-text-highlight: var(--search-highlight-color);
-  --n-search-input-height: 50px;
-  --n-search-footer-height: 40px;
-  --n-search-container-height: 400px;
 }
 
 .n-search-modal {
@@ -24,17 +21,13 @@
   border-radius: var(--n-search-border-radius);
   width: min(var(--n-search-max-w), 100%);
   margin: auto;
-  background: var(--n-search-color-bg);
-}
-
-.n-search-modal-ask {
-  --n-search-max-w: 800px;
 }
 
 .n-search-container {
   --mark-bg: var(--n-search-text-highlight);
   display: grid;
   width: min(var(--n-search-max-w), 100%);
+  min-height: 470px;
   background-color: var(--n-search-color-bg);
   border-radius: var(--n-search-border-radius);
   overflow: hidden;
@@ -50,14 +43,13 @@
 }
 
 .n-search-input-wrapper {
-  position: relative;
+  all: unset;
   display: flex;
   width: 100%;
-  height: var(--n-search-input-height);
+  border-bottom: 1px solid var(--n-search-color-border);
 }
 
 .n-search-input {
-  position: relative;
   display: inline-flex;
   box-sizing: border-box;
   background: var(--n-search-color-bg);
@@ -68,32 +60,16 @@
   border: none;
   outline: none;
   font-size: 1rem;
-  color: var(--color-text-1);
-}
-
-.n-search-input-wrapper::after,
-.n-search-footer::after {
-  content: '';
-  display: block;
-  width: 200%;
-  height: 1px;
-  background: var(--n-search-color-border);
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  color: var(--color-text);
 }
 
 .n-search-input::placeholder {
-  color: var(--n-search-color-text-secondary);
-}
-
-.n-search-links {
-  padding: var(--space-2xs);
+  color: var(--n-search-color-text);
 }
 
 .n-search-label {
   display: flex;
-  padding-inline-start: var(--n-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
   align-items: center;
 }
 
@@ -104,8 +80,8 @@
 
 .n-search-icon {
   display: flex;
-  width: var(--n-search-icon-size, 1em);
-  height: var(--n-search-icon-size, 1em);
+  width: var(--n-search-icon-size, 0.8em);
+  height: var(--n-search-icon-size, 0.8em);
   color: var(--n-search-color-text-secondary);
 }
 
@@ -116,26 +92,28 @@
 
 /* Search Results */
 .n-search-window {
-  height: var(--n-search-container-height);
+  height: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  scroll-padding-block: var(--space-s);
   margin-block: 0;
   background: var(--n-search-color-bg);
 }
 
+.n-results-list-item {
+  border-bottom: 1px solid var(--color-bg-3);
+}
+.n-results-list-item:first-of-type {
+  border-top: 1px solid var(--color-bg-3);
+}
+
 /* Footer */
 .n-search-footer {
-  position: relative;
+  border-top: 1px solid var(--n-search-color-border);
+  padding: var(--space-2xs) var(--space-s);
+  background: var(--color-bg-2);
   display: flex;
   gap: var(--space-m);
-  padding: var(--space-2xs) var(--space-s);
-  height: var(--n-search-footer-height);
-}
-
-.n-search-footer::after {
-  top: 0;
 }
 
 .n-search-footer-tip {
@@ -150,8 +128,7 @@
 .n-search-modal {
   transition:
     display 0.2s allow-discrete,
-    overlay 0.2s allow-discrete,
-    width 0.15s ease-in-out;
+    overlay 0.2s allow-discrete;
   animation: closeSearch 0.2s forwards;
 }
 
@@ -159,43 +136,28 @@
   animation: openSearch 0.2s forwards;
 }
 
-.n-search-modal[data-state='search'] > * {
-  opacity: 0;
-  animation: appearContainer 120ms ease-in-out forwards;
-  animation-delay: 140ms;
-}
-
-@keyframes appearContainer {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 @keyframes openSearch {
   from {
     opacity: 0;
-    transform: scale(0.9);
+    transform: translateY(20px) scale(0.9);
   }
   to {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0px) scale(1);
   }
 }
 
 @keyframes closeSearch {
   from {
     opacity: 1;
-    transform: scale(1);
+    transform: translateY(0px) scale(1);
   }
   50% {
     opacity: 0.3;
   }
   to {
     opacity: 0;
-    transform: scale(0.9);
+    transform: translateY(20px) scale(0.9);
   }
 }
 

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -15,24 +15,20 @@ import {
   useSearchLogger,
 } from '../../hooks';
 
-import AskNetlify from '../../../../preact/AskNetlify/AskNetlify';
-
 import './SearchModal.css';
 
 interface Props {
   children: ComponentChildren;
   className?: string;
-  debug?: boolean;
+  debug?: boolean
 }
 
-function SearchModal(props: Props = { className: '', children: null, debug: false }) {
+function SearchModal(props: Props = {className: '', children: null, debug: false }) {
   const [isPagefindLoaded, setIsPagefindLoaded] = useState(false);
-  const [modalState, setModalState] = useState({ current: 'search' });
-  const [askNetlifyQuery, setAskNetlifyQuery] = useState('');
 
   // Poll for the existence of window.pagefind.
   useEffect(() => {
-    let intervalId: number;
+    let intervalId:number;
 
     const checkForPagefind = () => {
       if (window.pagefind) {
@@ -49,18 +45,19 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
     return () => clearInterval(intervalId);
   }, []);
 
+
   const { children, className, debug, ...rest } = props;
   const { state, actions } = useSearch();
-
   const [searchOpen, setSearchOpen] = useState(false);
+
   const openSearch = () => setSearchOpen(true);
   const closeSearch = () => setSearchOpen(false);
 
   const modalRef = useRef<HTMLDialogElement>(null);
   const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
 
-  useSearchLogger(state, debug);
-  useSearchToggles(isPagefindLoaded, openSearch, setModalState);
+  useSearchLogger(state, debug)
+  useSearchToggles(isPagefindLoaded,  openSearch);
   useSearchParams(isPagefindLoaded, actions.setSearchTerm, openSearch);
   useSearchHotkeys(isPagefindLoaded, searchOpen, openSearch, closeSearch);
   useKeyboardNav(isPagefindLoaded, modalRef, searchOpen, closeSearch);
@@ -70,58 +67,31 @@ function SearchModal(props: Props = { className: '', children: null, debug: fals
     searchOpen ? modalRef.current.showModal() : modalRef.current.close();
   }, [searchOpen]);
 
-  useEffect(() => {
-    const input = modalRef.current?.querySelector('input');
-
-    if (input) input.focus();
-
-    if (modalState.current === 'ask') {
-      setTimeout(() => {
-        modalRef.current.classList.add('n-search-modal-ask');
-      }, 150);
-    } else if (modalState.current === 'search') {
-      setTimeout(() => {
-        modalRef.current.classList.remove('n-search-modal-ask');
-      }, 150);
-    }
-  }, [modalState.current]);
-
   return (
-    <Modal
-      ref={modalRef}
-      className={`n-search-modal ${className ? className : ''}`}
-      data-state={modalState.current}
-      {...rest}
-    >
+    <Modal ref={modalRef} className={`n-search-modal ${className ? className : ''}`} {...rest}>
       <div ref={containerRef} className="n-search-container">
-        {modalState.current === 'ask' && <AskNetlify setModalState={setModalState} />}
-        {modalState.current === 'search' && (
-          <>
-            <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-
-            <SearchWindow
-              setModalState={setModalState}
-              searchLoading={state.isLoading}
-              searchTerm={state.searchTerm}
-              results={state.results}
-            >
-              {children}
-            </SearchWindow>
-
-            <div className="n-search-footer">
-              <p className="n-search-footer-tip">
-                <KeyboardKey keyNames={['Esc']} />
-                to close
-              </p>
-              <p className="n-search-footer-tip">
-                <KeyboardKey keyNames={['Tab']} />
-                <span>or</span>
-                <KeyboardKey keyNames={['↑', '↓']} />
-                to navigate
-              </p>
-            </div>
-          </>
-        )}
+          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+
+        <SearchWindow
+          searchLoading={state.isLoading}
+          searchTerm={state.searchTerm}
+          results={state.results}
+        >
+          {children}
+        </SearchWindow>
+
+        <div className="n-search-footer">
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Esc']} />
+            to close
+          </p>
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Tab']} />
+            <span>or</span>
+            <KeyboardKey keyNames={['↑', '↓']} />
+            to navigate
+          </p>
+        </div>
       </div>
     </Modal>
   );

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -1,11 +1,9 @@
 import type { FunctionComponent } from 'preact';
-import type { SearchResultsProps, SearchWindowProps } from '../types/search.types';
+import type { SearchLinkProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
 import { useMemo } from 'preact/hooks';
 import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink/SearchLink';
 
-import { handleThemeChange, ThemeMap, Theme } from '../../../../utils/theme';
-
 /* --- Search Results Window (for active searches) --- */
 const SearchResults: FunctionComponent<SearchResultsProps> = ({
   searchLoading,
@@ -22,9 +20,9 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
   if (!results || results.length === 0) {
     return (
-      <SearchHeading>
-        0 results for <span className="n-search-term">{searchTerm}</span>
-      </SearchHeading>
+        <SearchHeading>
+          0 results for <span className="n-search-term">{searchTerm}</span>
+        </SearchHeading>
     );
   }
 
@@ -45,41 +43,29 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
 
 /* --- Main Search Results Component --- */
 export default function SearchWindow({
-  setModalState,
   searchLoading,
   searchTerm,
   results,
   children: DefaultWindow,
 }: SearchWindowProps) {
+  const askNetlify: SearchLinkProps = {
+    icon: 'sparkles',
+    label: 'Ask Netlify AI',
+    url: 'https://docs.netlify.com/ask-netlify/',
+  };
+
   return (
     <div className="n-search-window">
-      <div className="n-search-links">
+      <div className="search-links">
+        <SearchLink {...askNetlify} />
         {searchTerm && searchTerm.length > 1 ? (
-          <SearchResults searchLoading={searchLoading} searchTerm={searchTerm} results={results} />
+          <SearchResults
+            searchLoading={searchLoading}
+            searchTerm={searchTerm}
+            results={results}
+          />
         ) : DefaultWindow ? (
-          <>
-            <SearchLink
-              as="button"
-              icon="askNetlify"
-              label="Ask Netlify AI"
-              onClick={() => {
-                setModalState({ current: 'ask' });
-              }}
-            />
-
-            {DefaultWindow}
-
-            <SearchHeading>Actions</SearchHeading>
-            <SearchLink
-              as="button"
-              icon="lightbulb"
-              label="Toggle theme"
-              onClick={() => {
-                const theme = document.documentElement.getAttribute('data-theme') as Theme;
-                theme && handleThemeChange(ThemeMap[theme]);
-              }}
-            />
-          </>
+          DefaultWindow
         ) : null}
       </div>
     </div>

package/packages/components/preact/SearchModal/hooks/useKeyboardNav.ts

@@ -21,7 +21,7 @@ export function useKeyboardNav(
   onClose: () => void
 ) {
   useEffect(() => {
-    if (!isPagefindLoaded) return;
+    if (!isPagefindLoaded) return 
     const handleKeydown = (e: KeyboardEvent) => {
       if (!isOpen) return;
 
@@ -35,7 +35,7 @@ export function useKeyboardNav(
         const container = containerRef.current;
         if (!container) return;
 
-        const links = Array.from(container.querySelectorAll('.n-search-link'));
+        const links = Array.from(container.querySelectorAll('a'));
         const currentIndex = links.findIndex(link => link === document.activeElement);
         const nextIndex =
           e.key === 'ArrowDown'

package/packages/components/preact/SearchModal/hooks/useSearchToggles.ts

@@ -12,24 +12,16 @@ import { useEffect } from 'preact/hooks';
  * @param onOpen - A function to be called when a toggle element is clicked.
  */
 
-export function useSearchToggles(
-  isPagefindLoaded: boolean,
-  onOpen: () => void,
-  setState: (state: { current: string }) => void
-) {
+export function useSearchToggles(isPagefindLoaded: boolean, onOpen: () => void) {
   useEffect(() => {
-    if (!isPagefindLoaded) return;
+    if (!isPagefindLoaded) return
     const toggles = document.querySelectorAll('[data-ntl-search-toggle]');
 
     if (!toggles.length) return;
 
     toggles.forEach(t => {
-      const current = t.dataset.ntlSearchToggle ? t.dataset.ntlSearchToggle : 'search';
       t.removeAttribute('disabled');
-      t.addEventListener('click', () => {
-        onOpen();
-        setState({ current });
-      });
+      t.addEventListener('click', onOpen);
     });
 
     return () => {

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -2,17 +2,14 @@ import type { ComponentChildren } from 'preact';
 import type { IconName } from '../../Icon';
 
 export interface SearchLinkProps {
-  as?: any;
   icon: IconName;
   label: string;
   resource?: 'blog' | 'changelog' | 'docs' | 'guide';
-  url?: string;
+  url: string;
   excerpt?: string;
-  onClick?: () => void;
 }
 
 export interface SearchWindowProps {
-  setModalState: (e: { current: string }) => void;
   searchLoading: boolean;
   searchTerm?: string;
   results?: SearchLinkProps[];
@@ -36,4 +33,4 @@ export interface SearchGTMObjectProps {
   resultUrl?: string;
   query?: string;
   debug_mode?: boolean;
-}
+}

package/packages/components/preact/index.ts

@@ -4,7 +4,6 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as AskNetlify } from "./AskNetlify/AskNetlify"
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/packages/styles/code-block.css

@@ -2,11 +2,10 @@
   position: relative;
   overflow: hidden;
   width: 100%;
-  border: 1px solid var(--neutral-700);
-  border-radius: 6px;
-  font-size: 0.9em;
   line-height: 1.5;
-  background-color: var(--neutral-800);
+  border: var(--n-code-block-border, 1px solid var(--neutral-700));
+  border-radius: var(--n-code-block-radius, var(--radius-m));
+  background-color: var(--n-code-block-bg-color, var(--neutral-900));
 }
 
 /* Title */
@@ -17,7 +16,7 @@
   padding-block: var(--space-2xs);
   padding-inline: var(--space-s);
   border-bottom: 1px solid var(--neutral-700);
-  font-size: 0.9em;
+  font-size: var(--font-size-text-sm);
   color: var(--neutral-200);
 }
 
@@ -26,7 +25,7 @@
   border-radius: 2px;
   background-color: var(--neutral-700);
   letter-spacing: 0.05em;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
 }
 
@@ -35,34 +34,29 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
 
 /* Code */
 .code-block .code-block-content {
+  display: grid;
   position: relative;
   overflow: auto;
   margin: 0;
 }
 
 .code-block pre {
+  margin: 0;
   border: 0;
-  border-radius: 6px;
   padding-block: var(--space-m);
   padding-inline: var(--space-s);
-  margin: 0;
-}
-
-.code-block .code-block-content:not(:only-child) pre {
-  border-radius: 0 0 6px 6px;
-}
-
-.code-block pre:focus-visible {
   outline-offset: -2px;
 }
 
 .code-block :where(pre, code) {
-  font-family: var(--font-monospace, monospace);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-text-md);
+  font-weight: var(--font-weight-regular);
 }
 
 /* Copy button */
@@ -85,10 +79,9 @@
 }
 
 .code-block .copy-button:hover,
-.code-block .copy-button:focus {
+.code-block .copy-button:focus-visible {
   background-color: var(--neutral-900);
   color: var(--neutral-200);
-  outline: none;
 }
 
 .code-block .copy-button svg {
@@ -170,10 +163,6 @@
 }
 
 /* Frame styling */
-.code-block.terminal-frame {
-  background-color: #1e1e1e;
-}
-
 .code-block.terminal-frame::before {
   position: relative;
   display: block;
@@ -251,3 +240,13 @@
   line-height: 1.75;
   text-align: right;
 }
+
+/* Hide copy button until hovered or focused */
+.code-block.show-copy-on-hover .copy-button {
+  opacity: 0;
+}
+
+.code-block.show-copy-on-hover:hover .copy-button,
+.code-block.show-copy-on-hover .copy-button:focus {
+  opacity: 1;
+}

package/packages/styles/fonts.css

@@ -107,14 +107,14 @@ h2,
 h3,
 .h3 {
   font-size: var(--font-size-display-lg);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-heading);
 }
 
 h4,
 .h4 {
   font-size: var(--font-size-display-sm);
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-heading);
 }
 
@@ -128,18 +128,23 @@ ol li::marker {
 }
 
 [data-list-variant='checklist'] {
+  padding-inline-start: 1.35em;
   list-style: none;
 
   li {
     position: relative;
   }
 
+  li + li {
+    margin-block-start: var(--space-s);
+  }
+
   li::before {
     content: '';
     display: block;
     position: absolute;
     right: calc(100% + var(--space-3xs));
-    top: 0.35em;
+    top: 0.3em;
     width: 1em;
     height: 1em;
     background-color: var(--color-icon);

package/packages/styles/layout.css

@@ -28,3 +28,36 @@
   gap: var(--n-grid-gap, var(--space-m));
   grid-auto-rows: var(--n-grid-auto-rows, auto);
 }
+
+.n-stack {
+  display: grid;
+  grid-template-areas: 'stack';
+
+  > * {
+    grid-area: stack;
+  }
+}
+
+.n-sidebar-first,
+.n-sidebar-last {
+  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)));
+}
+
+.n-sidebar-first > :first-child,
+.n-sidebar-last > :last-child {
+  flex-basis: var(--n-sidebar-size, initial);
+  flex-grow: 1;
+}
+
+.n-sidebar-first > :last-child,
+.n-sidebar-last > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--n-sidebar-min, 60%);
+}