@netlify/spark-ui 1.0.3-alpha.0 → 1.0.3-alpha.1

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 (5) hide show
  1. package/dist/assets/AskNetlify.css +1 -1
  2. package/dist/components/preact/AskNetlify/AskNetlify.js +5 -1
  3. package/package.json +1 -1
  4. package/packages/components/preact/AskNetlify/AskNetlify.css +5 -4
  5. package/packages/components/preact/AskNetlify/AskNetlify.tsx +5 -1
package/dist/assets/AskNetlify.css CHANGED
@@ -1 +1 @@
1
- .chat-container{opacity:0;animation:appearContainer .35s ease-in-out forwards;animation-delay:.3s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{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;gap:var(--space-s)}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:1rem;background:var(--neutral-light-100);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box}.prose code{overflow-x:scroll}.prose code[class*=language-],.prose pre[class*=language-]{display:block;padding:var(--space-s)}.user-message{margin-inline-start:auto;background:var(--blue-000)}.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(--neutral-light-100);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--blue-600);color:var(--neutral-000);transition:filter .3s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px}.form-submit[disabled]{filter:saturate(0)}.button-back{width:fit-content;background:transparent;position:absolute;padding:.5rem 1rem;background:var(--color-bg);margin:1rem;border-radius:7rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--2);border:1px solid;cursor:pointer;color:var(--color-text)}.pulsing{display:block;width:1rem;height:1rem;clip-path:circle(40%);background:var(--blue-700);animation:pulsing 2.5s infinite ease-in-out}@keyframes pulsing{0%,to{transform:scale(.9)}50%{transform:scale(1.05)}}
1
+ .chat-container{opacity:0;animation:appearContainer .35s ease-in-out forwards;animation-delay:.3s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}.conversation{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;gap:var(--space-s)}.message{display:grid;gap:var(--space-s)}.message-bubble{padding:1rem;background:var(--neutral-light-100);border-radius:var(--radius-l);width:fit-content;max-width:85%;font-size:var(--step-0)}.prose{font-size:var(--step--0)}.prose>*+*{margin-top:var(--flow-space, var(--space-xs))}.prose h1,.prose h2,.prose h3{font-size:var(--step-1)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.prose pre{background:var(--neutral-light-700);border-radius:var(--radius-m);max-width:100%;box-sizing:border-box}.prose code{overflow-x:scroll}.prose code[class*=language-],.prose pre[class*=language-]{display:block;padding:var(--space-s)}.user-message{margin-inline-start:auto;background:var(--blue-000)}.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(--neutral-light-100);position:absolute;top:0;left:0}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;border-radius:var(--radius-pill);margin-inline-end:var(--space-2xs);border:none;background:var(--blue-600);color:var(--neutral-000);transition:filter .3s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px}.form-submit[disabled]{filter:saturate(0)}.button-back{width:fit-content;background:transparent;position:absolute;padding:.6rem 1rem;background:var(--color-bg);margin:1rem;border:2px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);border:1px solid;cursor:pointer;border-color:var(--neutral-300);color:var(--neutral-800);border-width:.5px}.pulsing{display:block;width:1rem;height:1rem;clip-path:circle(40%);background:var(--blue-700);animation:pulsing 2.5s infinite ease-in-out}@keyframes pulsing{0%,to{transform:scale(.9)}50%{transform:scale(1.05)}}
package/dist/components/preact/AskNetlify/AskNetlify.js CHANGED
@@ -5234,7 +5234,11 @@ function to({ setModalState: n }) {
5234
5234
  class: "button button-back",
5235
5235
  "data-button-variant": "outline",
5236
5236
  onClick: () => n({ current: "search" }),
5237
- children: "Return to Search"
5237
+ "aria-label": "Return to search",
5238
+ children: [
5239
+ /* @__PURE__ */ _("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: /* @__PURE__ */ _("path", { d: "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" }) }),
5240
+ "Search"
5241
+ ]
5238
5242
  }
5239
5243
  ),
5240
5244
  /* @__PURE__ */ _("div", { ref: u, className: "conversation n-search-window", children: r.map((l, h) => /* @__PURE__ */ _("div", { className: "message", children: [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "1.0.3-alpha.0",
4
+ "version": "1.0.3-alpha.1",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
package/packages/components/preact/AskNetlify/AskNetlify.css CHANGED
@@ -129,16 +129,17 @@
129
129
  width: fit-content;
130
130
  background: transparent;
131
131
  position: absolute;
132
- padding: 0.5rem 1rem;
132
+ padding: 0.6rem 1rem;
133
133
  background: var(--color-bg);
134
134
  margin: 1rem;
135
- border-radius: 7rem;
136
135
  border: 2px solid var(--color-bg-3);
137
136
  border-radius: var(--radius-pill);
138
- font-size: var(--step--2);
137
+ font-size: var(--step--1);
139
138
  border: 1px solid;
140
139
  cursor: pointer;
141
- color: var(--color-text);
140
+ border-color: var(--neutral-300);
141
+ color: var(--neutral-800);
142
+ border-width: 0.5px;
142
143
  }
143
144
 
144
145
  .pulsing {
package/packages/components/preact/AskNetlify/AskNetlify.tsx CHANGED
@@ -45,8 +45,12 @@ function ChatInterface({ setModalState }) {
45
45
  class="button button-back"
46
46
  data-button-variant="outline"
47
47
  onClick={() => setModalState({ current: 'search' })}
48
+ aria-label={'Return to search'}
48
49
  >
49
- Return to Search
50
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
51
+ <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" />
52
+ </svg>
53
+ Search
50
54
  </button>
51
55
  <div ref={chatRef} className="conversation n-search-window">
52
56
  {conversation.map((qa, index) => (