@netlify/spark-ui 1.5.0-alpha.12 → 1.5.0-alpha.14

package/dist/components/preact/Icon/index.js

@@ -81,9 +81,9 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     {
       id: "ask-netlify-eyelid-left",
       x: "3",
-      y: "9.5",
+      y: "7.3",
       width: "3",
-      height: "2.5",
+      height: "2",
       fill: "var(--search-bg-color, currentColor)"
     }
   ),
@@ -92,9 +92,9 @@ const l = () => /* @__PURE__ */ C(e, { children: [
     {
       id: "ask-netlify-eyelid-right",
       x: "9.7",
-      y: "9.5",
+      y: "7.3",
       width: "3",
-      height: "2.5",
+      height: "2",
       fill: "var(--search-bg-color, currentColor)"
     }
   )

package/package.json

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

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -1,40 +1,78 @@
+/* ----------------------------- */
+/* Layout Containers             */
+/* ----------------------------- */
 .chat-container {
   opacity: 0;
   animation: appearContainer 120ms ease-in-out forwards;
   animation-delay: 140ms;
 }
 
-@keyframes appearContainer {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 .conversation {
+  display: grid;
+  align-items: flex-end;
   height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
   padding: var(--n-search-padding-inline);
-  scroll-behavior: smooth;
   overflow-y: auto;
-  display: grid;
-  align-items: flex-end;
+  scroll-behavior: smooth;
   gap: var(--space-s);
 }
 
+.form-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--n-search-input-height);
+  background-color: var(--search-input-bg-color);
+}
+
+.form-wrapper::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--color-bg-3);
+}
+
+/* ----------------------------- */
+/* Conversation and Message UI  */
+/* ----------------------------- */
 .question {
   border: none;
-  color: var(--color-text-1);
-  font-weight: var(--font-weight-regular);
-  font-size: var(--step--1);
   border-radius: var(--radius-pill);
   transform: translateX(-0.75rem);
-  text-wrap: pretty;
+  color: var(--color-text-1);
+  font-size: var(--step--1);
+  font-weight: var(--font-weight-regular);
   text-align: left;
+  text-wrap: pretty;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  transition: background-color 200ms ease-out;
+}
+
+.question [data-icon='caretRight'] {
+  opacity: 0;
+  color: var(--color-text-weaker);
+  transform: translateX(-3px);
+  transition: transform 200ms ease-out;
+}
+
+.question:hover {
+  background-color: var(--search-back-btn-bg-color);
+
+  [data-icon='caretRight'] {
+    opacity: 1;
+    transform: translateX(0px);
+  }
 }
 
 .question-list li {
+  position: relative;
+  width: fit-content;
   opacity: 0;
   transform: translateY(10px);
   animation: fadeInUp 0.5s forwards;
@@ -43,22 +81,13 @@
 .question-list li:nth-child(1) {
   animation-delay: 0.5s;
 }
-
 .question-list li:nth-child(2) {
   animation-delay: 0.3s;
 }
-
 .question-list li:nth-child(3) {
   animation-delay: 0.1s;
 }
 
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .message {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -67,81 +96,22 @@
 }
 
 .message-bubble {
+  width: fit-content;
+  max-width: 85%;
   padding: var(--space-xs) var(--space-s);
   background: var(--search-answer-message-color);
   border-radius: var(--radius-l);
-  width: fit-content;
-  max-width: 85%;
   font-size: var(--step-0);
 }
 
-.prose {
-  font-size: var(--step--0);
-
-  > * + * {
-    margin-top: var(--flow-space, var(--space-s));
-  }
-
-  :where(ol, ul, li) > * + * {
-    margin-top: var(--flow-space, var(--space-3xs));
-  }
-
-  h1,
-  h2,
-  h3 {
-    font-size: var(--step-1);
-  }
-
-  h4,
-  h5,
-  h6 {
-    font-size: var(--step-0);
-  }
-
-  pre {
-    background: var(--neutral-light-700);
-    border-radius: var(--radius-m);
-    max-width: 100%;
-    box-sizing: border-box;
-    padding: var(--space-s);
-    color: var(--neutral-100);
-    overflow-x: auto;
-  }
-
-  code {
-    overflow-x: auto;
-  }
-
-  code[class*='language-'],
-  pre[class*='language-'] {
-    display: block;
-    font-size: var(--font-size-text-xs);
-  }
-}
-
 .user-message {
   margin-inline-start: auto;
   background: var(--search-user-message-color);
 }
 
-.form-wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: var(--n-search-input-height);
-}
-
-.form-wrapper::after {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 1px;
-  background: var(--color-bg-3);
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
+/* ----------------------------- */
+/* Form UI                      */
+/* ----------------------------- */
 .form-input {
   border: none;
   outline: none;
@@ -149,12 +119,11 @@
 }
 
 .form-submit {
-  border: none;
   padding: 0.7rem;
-  border-radius: var(--radius-pill);
   margin-inline-end: var(--space-2xs);
   border: none;
-  background: var(--color-link-1);
+  border-radius: var(--radius-pill);
+  background: var(--search-submit-btn-bg-color);
   color: var(--neutral-000);
   transition: background-color 150ms ease-out;
 }
@@ -169,53 +138,116 @@
 
 .form-submit[disabled] {
   background: var(--neutral-500);
+}
 
-  & > * {
-    opacity: 0.5;
-  }
+.form-submit[disabled] > * {
+  opacity: 0.5;
 }
 
+/* ----------------------------- */
+/* Buttons                      */
+/* ----------------------------- */
 .button-back {
-  width: fit-content;
-  background: transparent;
   position: absolute;
   z-index: 1;
+  width: fit-content;
+  margin: 1rem;
   padding: 0.5rem 1rem;
   background: var(--search-back-btn-bg-color);
-  margin: 1rem;
-  border: 2px solid var(--color-bg-3);
+  border: 0.5px solid var(--color-bg-3);
   border-radius: var(--radius-pill);
   font-size: var(--step--1);
-  border: 1px solid;
-  cursor: pointer;
-  border-color: var(--color-bg-3);
   color: var(--color-text-1);
-  border-width: 0.5px;
+  cursor: pointer;
 }
 
+/* ----------------------------- */
+/* Typography & Prose           */
+/* ----------------------------- */
+.prose {
+  font-size: var(--step--0);
+}
+
+.prose > * + * {
+  margin-top: var(--flow-space, var(--space-s));
+}
+
+.prose :where(ol, ul, li) > * + * {
+  margin-top: var(--flow-space, var(--space-3xs));
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+  font-size: var(--step-1);
+  font-weight: var(--font-weight-bold);
+}
+
+.prose h4,
+.prose h5,
+.prose h6 {
+  font-size: var(--step-0);
+  font-weight: var(--font-weight-bold);
+}
+
+.prose pre {
+  max-width: 100%;
+  padding: var(--space-s);
+  background: var(--neutral-light-700);
+  border-radius: var(--radius-m);
+  box-sizing: border-box;
+  color: var(--neutral-100);
+  overflow-x: auto;
+}
+
+.prose code {
+  overflow-x: auto;
+}
+
+.prose code[class*='language-'],
+.prose pre[class*='language-'] {
+  display: block;
+  font-size: var(--font-size-text-xs);
+}
+
+/* ----------------------------- */
+/* Loaders and SVG Effects      */
+/* ----------------------------- */
 .message-loader {
-  width: 43px;
+  width: 2.5rem;
   height: auto;
   display: block;
   color: var(--search-loading-color);
+}
 
-  & :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
-    opacity: 0;
-    animation: tickFlicker 800ms ease-in-out infinite;
-  }
+.message-loader :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
+  opacity: 0;
+  animation: fadeIn 800ms ease-in-out infinite;
 }
 
-#ask-netlify-tick-1 {
+.message-loader #ask-netlify-tick-1 {
   animation-delay: 100ms;
 }
-#ask-netlify-tick-2 {
+
+.message-loader #ask-netlify-tick-2 {
   animation-delay: 200ms;
 }
-#ask-netlify-tick-3 {
+
+.message-loader #ask-netlify-tick-3 {
   animation-delay: 300ms;
 }
 
-@keyframes tickFlicker {
+.message-loader :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
+  transform-origin: top center;
+  transform: scaleY(1.035);
+  animation: askEyeBlink 4s infinite;
+  animation-delay: 1s;
+}
+
+/* ----------------------------- */
+/* Animations and Keyframes     */
+/* ----------------------------- */
+@keyframes fadeIn {
   0% {
     opacity: 0;
   }
@@ -224,33 +256,32 @@
   }
 }
 
-#ask-netlify-eyelid-left,
-#ask-netlify-eyelid-right {
-  transform-origin: top center;
-  animation: blink 4s infinite;
-  animation-delay: 1s;
-  transform: scaleY(0.8);
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-@keyframes blink {
+@keyframes askEyeBlink {
   0%,
   5% {
-    transform: scaleY(0.8);
+    transform: scaleY(1.035);
   }
   6%,
   10% {
-    transform: scaleY(1);
+    transform: scaleY(1.3);
   }
   11%,
   15% {
-    transform: scaleY(0.8);
+    transform: scaleY(1.035);
   }
   16%,
   20% {
-    transform: scaleY(1);
+    transform: scaleY(1.3);
   }
   21%,
   100% {
-    transform: scaleY(0.8);
+    transform: scaleY(1.035);
   }
 }

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

@@ -29,7 +29,9 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
   const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
     useChat();
 
-  const chatRef = useRef(null);
+  const chatRef = useRef<HTMLDivElement>(null);
+  const indicatorRef = useRef<HTMLSpanElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
 
   const questions: Record<string, string> = {
     'a69747ed-505b-4e98-8535-fd357c327516': 'How do I deploy an app to Netlify using AI?',
@@ -58,11 +60,6 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
     }
   };
 
-  useEffect(() => {
-    const el = chatRef.current as HTMLElement | null;
-    if (el) el.scrollTop = el.scrollHeight;
-  }, [conversation]);
-
   return (
     <div className="chat-container">
       <button
@@ -81,14 +78,27 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
       </button>
       <div ref={chatRef} className="conversation n-search-window">
         {!conversation.length && (
-          <ul class="question-list" role="list">
+          <ul ref={menuRef} class="question-list" role="list">
             {Object.entries(questions).map(([id, question]) => (
               <li>
                 <button class="question" onClick={handleSubmit} data-id={id}>
                   {question}
+                  <Icon name="caretRight" />
                 </button>
               </li>
             ))}
+
+            <span
+              ref={indicatorRef}
+              style={{
+                position: 'absolute',
+                background: 'rgba(0, 0, 0, 0.1)',
+                borderRadius: '4px',
+                transition: 'all 200ms ease',
+                pointerEvents: 'none',
+                zIndex: -1,
+              }}
+            />
           </ul>
         )}
 

package/packages/components/preact/Icon/index.tsx

@@ -64,17 +64,17 @@ const AskNetlify: FunctionComponent = () => {
       <rect
         id="ask-netlify-eyelid-left"
         x="3"
-        y="9.5"
+        y="7.3"
         width="3"
-        height="2.5"
+        height="2"
         fill="var(--search-bg-color, currentColor)"
       />
       <rect
         id="ask-netlify-eyelid-right"
         x="9.7"
-        y="9.5"
+        y="7.3"
         width="3"
-        height="2.5"
+        height="2"
         fill="var(--search-bg-color, currentColor)"
       />
     </>

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

@@ -1,7 +1,7 @@
 .n-search-heading {
   --n-search-heading-weight: var(--font-weight-semibold, 400);
   --n-search-heading-size: var(--font-size-text-xs, 13px);
-  --n-search-heading-color: var(--color-text-weaker, #757575);
+  --n-search-heading-color: var(--color-text-weak, #757575);
 
   font-size: var(--n-search-heading-size);
   font-weight: var(--n-search-heading-weight);

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

@@ -31,6 +31,11 @@
   & .n-search-link-icon [data-icon='caretRight'] {
     opacity: 1;
   }
+
+  & .n-search-link-icon :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
+    animation: askEyeBlink 4s infinite;
+    animation-delay: 500ms;
+  }
 }
 
 .n-search-link-title {
@@ -59,7 +64,7 @@
   display: flex;
   width: var(--n-search-icon-size);
   height: var(--n-search-icon-size);
-  color: var(--n-search-color-text-secondary);
+  color: var(--n-search-color-icon);
 }
 
 .n-search-link-icon [data-icon='caretRight'] {

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

@@ -6,7 +6,8 @@
 .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-color-text-secondary: var(--color-text-weak, currentColor);
+  --n-search-color-icon: var(--color-text-weak);
   --n-search-color-bg: var(--search-bg-color);
   --n-search-color-bg-2: var(--color-bg-3);
   --n-search-color-border: var(--color-bg-3);
@@ -15,7 +16,7 @@
   --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-container-height: min(50dvh, 26.5rem);
 }
 
 .n-search-modal {
@@ -60,7 +61,7 @@
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
-  background: var(--n-search-color-bg);
+  background: transparent;
   inline-size: 100%;
   padding-block: 0.75rem;
   padding-inline: var(--n-search-padding-inline);

package/packages/styles/tokens.css

@@ -160,8 +160,10 @@
   --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
-  --search-loading-color: var(--blue-700);
-  --search-user-message-color: var(--blue-100);
+  --search-input-bg-color: var(--neutral-100);
+  --search-loading-color: var(--teal-700);
+  --search-submit-btn-bg-color: var(--teal-200);
+  --search-user-message-color: var(--teal-000);
   --shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
   --shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
   --shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
@@ -256,7 +258,9 @@
     --search-back-btn-bg-color: var(--neutral-500);
     --search-bg-color: var(--neutral-700);
     --search-highlight-color: var(--teal-800);
+    --search-input-bg-color: var(--neutral-600);
     --search-loading-color: var(--teal-200);
+    --search-submit-btn-bg-color: var(--teal-200);
     --search-user-message-color: var(--teal-800);
     --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
@@ -328,7 +332,9 @@
   --search-back-btn-bg-color: var(--neutral-500);
   --search-bg-color: var(--neutral-700);
   --search-highlight-color: var(--teal-800);
+  --search-input-bg-color: var(--neutral-600);
   --search-loading-color: var(--teal-200);
+  --search-submit-btn-bg-color: var(--teal-200);
   --search-user-message-color: var(--teal-800);
   --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
@@ -399,8 +405,10 @@
   --search-back-btn-bg-color: var(--neutral-100);
   --search-bg-color: var(--neutral-000);
   --search-highlight-color: var(--teal-000);
-  --search-loading-color: var(--blue-700);
-  --search-user-message-color: var(--blue-100);
+  --search-input-bg-color: var(--neutral-100);
+  --search-loading-color: var(--teal-700);
+  --search-submit-btn-bg-color: var(--teal-200);
+  --search-user-message-color: var(--teal-000);
   --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }