@netlify/spark-ui 1.5.0-alpha.11 → 1.5.0-alpha.13
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.
- package/dist/assets/AskNetlify.css +1 -1
- package/dist/assets/SearchLink.css +1 -1
- package/dist/assets/SearchModal.css +1 -1
- package/dist/components/preact/AskNetlify/AskNetlify.js +1 -1
- package/dist/components/preact/Icon/index.js +2 -2
- package/dist/components/preact/SearchModal/components/SearchWindow.js +20 -19
- package/package.json +1 -1
- package/packages/components/preact/AskNetlify/AskNetlify.css +130 -123
- package/packages/components/preact/AskNetlify/AskNetlify.tsx +2 -2
- package/packages/components/preact/Icon/index.tsx +2 -2
- package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +1 -1
- package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +2 -1
- package/packages/components/preact/SearchModal/components/SearchWindow.tsx +4 -2
- package/packages/styles/tokens.css +4 -0
- package/packages/utils/theme.ts +4 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}
|
|
1
|
+
.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}.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);overflow-y:auto;scroll-behavior:smooth;gap:var(--space-s)}.form-wrapper{display:flex;align-items:center;position:relative;height:var(--n-search-input-height)}.form-wrapper:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:1px;background:var(--color-bg-3)}.question{border:none;border-radius:var(--radius-pill);transform:translate(-.75rem);color:var(--color-text-1);font-size:var(--step--1);font-weight:var(--font-weight-regular);text-align:left;text-wrap:pretty}.question-list li{opacity:0;transform:translateY(10px);animation:fadeInUp .5s forwards}.question-list li:nth-child(1){animation-delay:.5s}.question-list li:nth-child(2){animation-delay:.3s}.question-list li:nth-child(3){animation-delay:.1s}.message{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-s);margin-block-start:var(--space-2xl)}.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);font-size:var(--step-0)}.user-message{margin-inline-start:auto;background:var(--search-user-message-color)}.form-input{border:none;outline:none;padding-inline:var(--n-search-padding-inline)}.form-submit{padding:.7rem;margin-inline-end:var(--space-2xs);border:none;border-radius:var(--radius-pill);background:var(--color-link-1);color:var(--neutral-000);transition:background-color .15s ease-out}.form-submit>svg{width:1rem;height:auto;aspect-ratio:1 / 1;border-radius:1.5px;transition:opacity .15s ease-out}.form-submit[disabled]{background:var(--neutral-500)}.form-submit[disabled]>*{opacity:.5}.button-back{position:absolute;z-index:1;width:fit-content;margin:1rem;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);border:.5px solid var(--color-bg-3);border-radius:var(--radius-pill);font-size:var(--step--1);color:var(--color-text-1);cursor:pointer}.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)}.prose h4,.prose h5,.prose h6{font-size:var(--step-0)}.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)}.message-loader{width:2.5rem;height:auto;display:block;color:var(--search-loading-color)}.message-loader :where(#ask-netlify-tick-1,#ask-netlify-tick-2,#ask-netlify-tick-3){opacity:0;animation:fadeIn .8s ease-in-out infinite}.message-loader #ask-netlify-tick-1{animation-delay:.1s}.message-loader #ask-netlify-tick-2{animation-delay:.2s}.message-loader #ask-netlify-tick-3{animation-delay:.3s}.message-loader :where(#ask-netlify-eyelid-left,#ask-netlify-eyelid-right){transform-origin:top center;transform:scaleY(1);animation:askEyeBlink 4s infinite;animation-delay:1s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@keyframes askEyeBlink{0%,5%{transform:scaleY(1)}6%,10%{transform:scaleY(1.3)}11%,15%{transform:scaleY(1)}16%,20%{transform:scaleY(1.3)}21%,to{transform:scaleY(1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-
|
|
1
|
+
.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.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);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-
|
|
1
|
+
.n-keyboard-key{--n-key-text-size: .8em;--n-key-border-radius: 6px;--n-key-text-color: currentColor;--n-key-bg-color: transparent;display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--n-key-text-size);color:var(--n-key-text-color);background:var(--n-key-bg-color);border:1px solid currentColor;border-radius:var(--n-key-border-radius);padding:var(--n-key-padding-block, .05em) var(--n-key-padding-inline, .3em)}.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);font-size:var(--n-search-heading-size);font-weight:var(--n-search-heading-weight);font-family:var(--font-family-mono);color:var(--n-search-heading-color);padding-inline:var(--space-xs);margin-block:var(--space-xs);letter-spacing:.2px}.n-search-link{--n-search-icon-size: 1.25em;box-sizing:border-box;display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s, 1rem);align-items:center;padding:var(--n-search-link-padding-block, 1em) var(--n-search-link-padding-inline, 1em);font-size:var(--font-size-text-sm);font-weight:var(--font-weight-regular);text-decoration:none;cursor:pointer;width:100%;border:none;text-align:left;outline:none;border-radius:var(--radius-l)}.n-search-link-body{flex:1;width:80%;color:var(--color-text-weak);text-wrap:pretty}.n-search-link:is(:hover,:focus-visible){background:var(--n-search-color-bg-2)}.n-search-link:is(:hover,:focus-visible) .n-search-link-icon [data-icon=caretRight]{opacity:1}.n-search-link-title{font-weight:var(--font-weight-medium);color:var(--color-text-1);line-height:1.5}.n-search-link-excerpt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--color-text-weak);line-height:1.3;font-size:.9em;margin-block-start:var(--space-3xs)}.n-search-link-excerpt mark{color:var(--mark-color, currentColor);background-color:var(--mark-bg, var(--color-highlight))}.n-search-link-icon,.n-search-link-icon svg{display:flex;width:var(--n-search-icon-size);height:var(--n-search-icon-size);color:var(--n-search-color-icon)}.n-search-link-icon [data-icon=caretRight]{width:1em;opacity:0}.n-search-link-label{margin-inline-end:var(--space-3xs)}.n-search-link-badge{display:inline-block;width:max-content;font-size:.7em;padding:.1em .4em;position:relative;bottom:.3em;color:var(--n-search-link-badge-text-color, var(--color-disabled-text));background:var(--n-search-link-badge-color, var(--color-disabled-bg));border:1px solid var(--n-search-link-badge-border, var(--color-disabled-border));border-radius:3px}.n-search-link-badge[data-resource=blog]{--n-search-link-badge-color: var(--color-info-bg);--n-search-link-badge-text-color: var(--color-info-text);--n-search-link-badge-border: var(--color-info-border)}.n-search-link-badge[data-resource=changelog]{--n-search-link-badge-color: var(--color-warning-bg);--n-search-link-badge-text-color: var(--color-warning-text);--n-search-link-badge-border: var(--color-warning-border)}.n-search-link-badge[data-resource=guide]{--n-search-link-badge-color: var(--color-highlight-bg);--n-search-link-badge-text-color: var(--color-highlight-text);--n-search-link-badge-border: var(--color-highlight-border)}.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-weakest, currentColor);--n-search-color-icon: var(--color-text-weakest);--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);--n-search-border-radius: 1.3rem;--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{padding:0;border:none;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%);background-color:var(--n-search-color-bg);border-radius:var(--n-search-border-radius);overflow:hidden}.n-search-bar{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--n-search-color-bg);border-bottom:1px solid var(--n-search-color-border)}.n-search-input-wrapper{position:relative;display:flex;width:100%;height:var(--n-search-input-height)}.n-search-input{position:relative;display:inline-flex;box-sizing:border-box;background:var(--n-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--n-search-padding-inline);flex:1;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}.n-search-input::placeholder{color:var(--n-search-color-text-secondary)}.n-search-links{padding:var(--space-2xs)}.n-search-label{display:flex;padding-inline-start:var(--n-search-padding-inline);align-items:center}.n-search-label>*{display:inline-block;margin:0}.n-search-icon{display:flex;width:var(--n-search-icon-size, 1em);height:var(--n-search-icon-size, 1em);color:var(--n-search-color-text-secondary)}.n-search-term{font-weight:var(--font-medium);font-size:1.1em}.n-search-window{height:var(--n-search-container-height);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-search-footer{position:relative;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{color:var(--n-search-color-text-secondary);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--font-size-text-sm)}.n-search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete,width .15s ease-in-out;animation:closeSearch .2s forwards}.n-search-modal[open]{animation:openSearch .2s forwards}.n-search-modal[data-state=search]>*{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@keyframes appearContainer{0%{opacity:0}to{opacity:1}}@keyframes openSearch{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:scale(1)}50%{opacity:.3}to{opacity:0;transform:scale(.9)}}.n-search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.n-search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}
|
|
@@ -5733,7 +5733,7 @@ function fl({ setModalState: e }) {
|
|
|
5733
5733
|
__html: P.parse(h.answer)
|
|
5734
5734
|
}
|
|
5735
5735
|
}
|
|
5736
|
-
) }) : /* @__PURE__ */ E("
|
|
5736
|
+
) }) : /* @__PURE__ */ E("div", { class: "message-loader", children: /* @__PURE__ */ E(Vi, { name: "askNetlify" }) }) })
|
|
5737
5737
|
] }, h.id || `qa-${d}`))
|
|
5738
5738
|
] }),
|
|
5739
5739
|
/* @__PURE__ */ E("form", { onSubmit: c, className: "form-wrapper n-search-input-wrapper", children: [
|
|
@@ -81,7 +81,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
|
|
|
81
81
|
{
|
|
82
82
|
id: "ask-netlify-eyelid-left",
|
|
83
83
|
x: "3",
|
|
84
|
-
y: "
|
|
84
|
+
y: "7.3",
|
|
85
85
|
width: "3",
|
|
86
86
|
height: "2.5",
|
|
87
87
|
fill: "var(--search-bg-color, currentColor)"
|
|
@@ -92,7 +92,7 @@ const l = () => /* @__PURE__ */ C(e, { children: [
|
|
|
92
92
|
{
|
|
93
93
|
id: "ask-netlify-eyelid-right",
|
|
94
94
|
x: "9.7",
|
|
95
|
-
y: "
|
|
95
|
+
y: "7.3",
|
|
96
96
|
width: "3",
|
|
97
97
|
height: "2.5",
|
|
98
98
|
fill: "var(--search-bg-color, currentColor)"
|
|
@@ -1,42 +1,43 @@
|
|
|
1
1
|
import { u as e } from "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
|
|
2
|
-
import { T as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { Fragment as
|
|
6
|
-
const
|
|
2
|
+
import { T as h } from "../../../../chunks/hooks.module.DGkdD5n9.js";
|
|
3
|
+
import s from "./SearchHeading/SearchHeading.js";
|
|
4
|
+
import a from "./SearchLink/SearchLink.js";
|
|
5
|
+
import { Fragment as d } from "preact";
|
|
6
|
+
const u = {
|
|
7
7
|
light: "dark",
|
|
8
8
|
dark: "light"
|
|
9
|
-
},
|
|
10
|
-
document.
|
|
11
|
-
|
|
9
|
+
}, g = (n) => {
|
|
10
|
+
const r = document.getElementById("site-theme-select");
|
|
11
|
+
r && (r.value = n), document.documentElement.setAttribute("data-theme", n), localStorage.setItem("theme", n);
|
|
12
|
+
}, f = ({
|
|
12
13
|
searchLoading: n,
|
|
13
14
|
searchTerm: r,
|
|
14
15
|
results: t
|
|
15
16
|
}) => {
|
|
16
17
|
if (n)
|
|
17
|
-
return /* @__PURE__ */ e(
|
|
18
|
+
return /* @__PURE__ */ e(s, { children: [
|
|
18
19
|
"Searching for ",
|
|
19
20
|
/* @__PURE__ */ e("span", { className: "n-search-term", children: r }),
|
|
20
21
|
" ..."
|
|
21
22
|
] });
|
|
22
23
|
if (!t || t.length === 0)
|
|
23
|
-
return /* @__PURE__ */ e(
|
|
24
|
+
return /* @__PURE__ */ e(s, { children: [
|
|
24
25
|
"0 results for ",
|
|
25
26
|
/* @__PURE__ */ e("span", { className: "n-search-term", children: r })
|
|
26
27
|
] });
|
|
27
|
-
const c =
|
|
28
|
+
const c = h(() => t.map((l, i) => /* @__PURE__ */ e("li", { className: "n-results-list-item", children: /* @__PURE__ */ e(a, { ...l }) }, i)), [t]);
|
|
28
29
|
return /* @__PURE__ */ e("ul", { className: "n-results-list", role: "list", children: c });
|
|
29
30
|
};
|
|
30
|
-
function
|
|
31
|
+
function A({
|
|
31
32
|
setModalState: n,
|
|
32
33
|
searchLoading: r,
|
|
33
34
|
searchTerm: t,
|
|
34
35
|
results: c,
|
|
35
36
|
children: l
|
|
36
37
|
}) {
|
|
37
|
-
return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(
|
|
38
|
+
return /* @__PURE__ */ e("div", { className: "n-search-window", children: /* @__PURE__ */ e("div", { className: "n-search-links", children: t && t.length > 1 ? /* @__PURE__ */ e(f, { searchLoading: r, searchTerm: t, results: c }) : l ? /* @__PURE__ */ e(d, { children: [
|
|
38
39
|
/* @__PURE__ */ e(
|
|
39
|
-
|
|
40
|
+
a,
|
|
40
41
|
{
|
|
41
42
|
as: "button",
|
|
42
43
|
icon: "askNetlify",
|
|
@@ -47,21 +48,21 @@ function N({
|
|
|
47
48
|
}
|
|
48
49
|
),
|
|
49
50
|
l,
|
|
50
|
-
/* @__PURE__ */ e(
|
|
51
|
+
/* @__PURE__ */ e(s, { children: "Actions" }),
|
|
51
52
|
/* @__PURE__ */ e(
|
|
52
|
-
|
|
53
|
+
a,
|
|
53
54
|
{
|
|
54
55
|
as: "button",
|
|
55
56
|
icon: "lightbulb",
|
|
56
57
|
label: "Toggle theme",
|
|
57
58
|
onClick: () => {
|
|
58
|
-
const i = document.documentElement.getAttribute("data-theme");
|
|
59
|
-
|
|
59
|
+
const i = window.matchMedia("(prefers-color-scheme: dark)").matches, m = document.documentElement.getAttribute("data-theme"), o = i ? "dark" : m || "light";
|
|
60
|
+
o && g(u[o]);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
62
63
|
)
|
|
63
64
|
] }) : null }) });
|
|
64
65
|
}
|
|
65
66
|
export {
|
|
66
|
-
|
|
67
|
+
A as default
|
|
67
68
|
};
|
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.5.0-alpha.
|
|
4
|
+
"version": "1.5.0-alpha.13",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/components/preact/index.js",
|
|
7
7
|
"types": "dist/components/preact/index.d.ts",
|
|
@@ -1,37 +1,52 @@
|
|
|
1
|
+
/* ----------------------------- */
|
|
2
|
+
/* Layout Containers */
|
|
3
|
+
/* ----------------------------- */
|
|
1
4
|
.chat-container {
|
|
2
5
|
opacity: 0;
|
|
3
6
|
animation: appearContainer 120ms ease-in-out forwards;
|
|
4
7
|
animation-delay: 140ms;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
|
-
@keyframes appearContainer {
|
|
8
|
-
0% {
|
|
9
|
-
opacity: 0;
|
|
10
|
-
}
|
|
11
|
-
100% {
|
|
12
|
-
opacity: 1;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
10
|
.conversation {
|
|
11
|
+
display: grid;
|
|
12
|
+
align-items: flex-end;
|
|
17
13
|
height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
|
|
18
14
|
padding: var(--n-search-padding-inline);
|
|
19
|
-
scroll-behavior: smooth;
|
|
20
15
|
overflow-y: auto;
|
|
21
|
-
|
|
22
|
-
align-items: flex-end;
|
|
16
|
+
scroll-behavior: smooth;
|
|
23
17
|
gap: var(--space-s);
|
|
24
18
|
}
|
|
25
19
|
|
|
20
|
+
.form-wrapper {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
position: relative;
|
|
24
|
+
height: var(--n-search-input-height);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.form-wrapper::after {
|
|
28
|
+
content: '';
|
|
29
|
+
display: block;
|
|
30
|
+
position: absolute;
|
|
31
|
+
top: 0;
|
|
32
|
+
left: 0;
|
|
33
|
+
width: 100%;
|
|
34
|
+
height: 1px;
|
|
35
|
+
background: var(--color-bg-3);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* ----------------------------- */
|
|
39
|
+
/* Conversation and Message UI */
|
|
40
|
+
/* ----------------------------- */
|
|
26
41
|
.question {
|
|
27
42
|
border: none;
|
|
28
|
-
color: var(--color-text-1);
|
|
29
|
-
font-weight: var(--font-weight-regular);
|
|
30
|
-
font-size: var(--step--1);
|
|
31
43
|
border-radius: var(--radius-pill);
|
|
32
44
|
transform: translateX(-0.75rem);
|
|
33
|
-
text-
|
|
45
|
+
color: var(--color-text-1);
|
|
46
|
+
font-size: var(--step--1);
|
|
47
|
+
font-weight: var(--font-weight-regular);
|
|
34
48
|
text-align: left;
|
|
49
|
+
text-wrap: pretty;
|
|
35
50
|
}
|
|
36
51
|
|
|
37
52
|
.question-list li {
|
|
@@ -43,104 +58,37 @@
|
|
|
43
58
|
.question-list li:nth-child(1) {
|
|
44
59
|
animation-delay: 0.5s;
|
|
45
60
|
}
|
|
46
|
-
|
|
47
61
|
.question-list li:nth-child(2) {
|
|
48
62
|
animation-delay: 0.3s;
|
|
49
63
|
}
|
|
50
|
-
|
|
51
64
|
.question-list li:nth-child(3) {
|
|
52
65
|
animation-delay: 0.1s;
|
|
53
66
|
}
|
|
54
67
|
|
|
55
|
-
@keyframes fadeInUp {
|
|
56
|
-
to {
|
|
57
|
-
opacity: 1;
|
|
58
|
-
transform: translateY(0);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
68
|
.message {
|
|
63
69
|
display: grid;
|
|
70
|
+
grid-template-columns: minmax(0, 1fr);
|
|
64
71
|
gap: var(--space-s);
|
|
65
72
|
margin-block-start: var(--space-2xl);
|
|
66
73
|
}
|
|
67
74
|
|
|
68
75
|
.message-bubble {
|
|
76
|
+
width: fit-content;
|
|
77
|
+
max-width: 85%;
|
|
69
78
|
padding: var(--space-xs) var(--space-s);
|
|
70
79
|
background: var(--search-answer-message-color);
|
|
71
80
|
border-radius: var(--radius-l);
|
|
72
|
-
width: fit-content;
|
|
73
|
-
max-width: 85%;
|
|
74
81
|
font-size: var(--step-0);
|
|
75
82
|
}
|
|
76
83
|
|
|
77
|
-
.prose {
|
|
78
|
-
font-size: var(--step--0);
|
|
79
|
-
|
|
80
|
-
> * + * {
|
|
81
|
-
margin-top: var(--flow-space, var(--space-s));
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
:where(ol, ul, li) > * + * {
|
|
85
|
-
margin-top: var(--flow-space, var(--space-3xs));
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
h1,
|
|
89
|
-
h2,
|
|
90
|
-
h3 {
|
|
91
|
-
font-size: var(--step-1);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
h4,
|
|
95
|
-
h5,
|
|
96
|
-
h6 {
|
|
97
|
-
font-size: var(--step-0);
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
pre {
|
|
101
|
-
background: var(--neutral-light-700);
|
|
102
|
-
border-radius: var(--radius-m);
|
|
103
|
-
max-width: 100%;
|
|
104
|
-
box-sizing: border-box;
|
|
105
|
-
padding: var(--space-s);
|
|
106
|
-
color: var(--neutral-100);
|
|
107
|
-
overflow-x: auto;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
code {
|
|
111
|
-
overflow-x: auto;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
code[class*='language-'],
|
|
115
|
-
pre[class*='language-'] {
|
|
116
|
-
display: block;
|
|
117
|
-
font-size: var(--font-size-text-xs);
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
84
|
.user-message {
|
|
122
85
|
margin-inline-start: auto;
|
|
123
86
|
background: var(--search-user-message-color);
|
|
124
87
|
}
|
|
125
88
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
position: relative;
|
|
130
|
-
height: var(--n-search-input-height);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
.form-wrapper::after {
|
|
134
|
-
content: '';
|
|
135
|
-
display: block;
|
|
136
|
-
width: 100%;
|
|
137
|
-
height: 1px;
|
|
138
|
-
background: var(--color-bg-3);
|
|
139
|
-
position: absolute;
|
|
140
|
-
top: 0;
|
|
141
|
-
left: 0;
|
|
142
|
-
}
|
|
143
|
-
|
|
89
|
+
/* ----------------------------- */
|
|
90
|
+
/* Form UI */
|
|
91
|
+
/* ----------------------------- */
|
|
144
92
|
.form-input {
|
|
145
93
|
border: none;
|
|
146
94
|
outline: none;
|
|
@@ -148,11 +96,10 @@
|
|
|
148
96
|
}
|
|
149
97
|
|
|
150
98
|
.form-submit {
|
|
151
|
-
border: none;
|
|
152
99
|
padding: 0.7rem;
|
|
153
|
-
border-radius: var(--radius-pill);
|
|
154
100
|
margin-inline-end: var(--space-2xs);
|
|
155
101
|
border: none;
|
|
102
|
+
border-radius: var(--radius-pill);
|
|
156
103
|
background: var(--color-link-1);
|
|
157
104
|
color: var(--neutral-000);
|
|
158
105
|
transition: background-color 150ms ease-out;
|
|
@@ -168,53 +115,114 @@
|
|
|
168
115
|
|
|
169
116
|
.form-submit[disabled] {
|
|
170
117
|
background: var(--neutral-500);
|
|
118
|
+
}
|
|
171
119
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}
|
|
120
|
+
.form-submit[disabled] > * {
|
|
121
|
+
opacity: 0.5;
|
|
175
122
|
}
|
|
176
123
|
|
|
124
|
+
/* ----------------------------- */
|
|
125
|
+
/* Buttons */
|
|
126
|
+
/* ----------------------------- */
|
|
177
127
|
.button-back {
|
|
178
|
-
width: fit-content;
|
|
179
|
-
background: transparent;
|
|
180
128
|
position: absolute;
|
|
181
129
|
z-index: 1;
|
|
130
|
+
width: fit-content;
|
|
131
|
+
margin: 1rem;
|
|
182
132
|
padding: 0.5rem 1rem;
|
|
183
133
|
background: var(--search-back-btn-bg-color);
|
|
184
|
-
|
|
185
|
-
border: 2px solid var(--color-bg-3);
|
|
134
|
+
border: 0.5px solid var(--color-bg-3);
|
|
186
135
|
border-radius: var(--radius-pill);
|
|
187
136
|
font-size: var(--step--1);
|
|
188
|
-
border: 1px solid;
|
|
189
|
-
cursor: pointer;
|
|
190
|
-
border-color: var(--color-bg-3);
|
|
191
137
|
color: var(--color-text-1);
|
|
192
|
-
|
|
138
|
+
cursor: pointer;
|
|
193
139
|
}
|
|
194
140
|
|
|
141
|
+
/* ----------------------------- */
|
|
142
|
+
/* Typography & Prose */
|
|
143
|
+
/* ----------------------------- */
|
|
144
|
+
.prose {
|
|
145
|
+
font-size: var(--step--0);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.prose > * + * {
|
|
149
|
+
margin-top: var(--flow-space, var(--space-s));
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.prose :where(ol, ul, li) > * + * {
|
|
153
|
+
margin-top: var(--flow-space, var(--space-3xs));
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.prose h1,
|
|
157
|
+
.prose h2,
|
|
158
|
+
.prose h3 {
|
|
159
|
+
font-size: var(--step-1);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.prose h4,
|
|
163
|
+
.prose h5,
|
|
164
|
+
.prose h6 {
|
|
165
|
+
font-size: var(--step-0);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.prose pre {
|
|
169
|
+
max-width: 100%;
|
|
170
|
+
padding: var(--space-s);
|
|
171
|
+
background: var(--neutral-light-700);
|
|
172
|
+
border-radius: var(--radius-m);
|
|
173
|
+
box-sizing: border-box;
|
|
174
|
+
color: var(--neutral-100);
|
|
175
|
+
overflow-x: auto;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.prose code {
|
|
179
|
+
overflow-x: auto;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.prose code[class*='language-'],
|
|
183
|
+
.prose pre[class*='language-'] {
|
|
184
|
+
display: block;
|
|
185
|
+
font-size: var(--font-size-text-xs);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/* ----------------------------- */
|
|
189
|
+
/* Loaders and SVG Effects */
|
|
190
|
+
/* ----------------------------- */
|
|
195
191
|
.message-loader {
|
|
196
|
-
width:
|
|
192
|
+
width: 2.5rem;
|
|
197
193
|
height: auto;
|
|
198
194
|
display: block;
|
|
199
195
|
color: var(--search-loading-color);
|
|
196
|
+
}
|
|
200
197
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}
|
|
198
|
+
.message-loader :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
|
|
199
|
+
opacity: 0;
|
|
200
|
+
animation: fadeIn 800ms ease-in-out infinite;
|
|
205
201
|
}
|
|
206
202
|
|
|
207
|
-
#ask-netlify-tick-1 {
|
|
203
|
+
.message-loader #ask-netlify-tick-1 {
|
|
208
204
|
animation-delay: 100ms;
|
|
209
205
|
}
|
|
210
|
-
|
|
206
|
+
|
|
207
|
+
.message-loader #ask-netlify-tick-2 {
|
|
211
208
|
animation-delay: 200ms;
|
|
212
209
|
}
|
|
213
|
-
|
|
210
|
+
|
|
211
|
+
.message-loader #ask-netlify-tick-3 {
|
|
214
212
|
animation-delay: 300ms;
|
|
215
213
|
}
|
|
216
214
|
|
|
217
|
-
|
|
215
|
+
.message-loader :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
|
|
216
|
+
transform-origin: top center;
|
|
217
|
+
transform: scaleY(1);
|
|
218
|
+
animation: askEyeBlink 4s infinite;
|
|
219
|
+
animation-delay: 1s;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* ----------------------------- */
|
|
223
|
+
/* Animations and Keyframes */
|
|
224
|
+
/* ----------------------------- */
|
|
225
|
+
@keyframes fadeIn {
|
|
218
226
|
0% {
|
|
219
227
|
opacity: 0;
|
|
220
228
|
}
|
|
@@ -223,33 +231,32 @@
|
|
|
223
231
|
}
|
|
224
232
|
}
|
|
225
233
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
transform: scaleY(0.8);
|
|
234
|
+
@keyframes fadeInUp {
|
|
235
|
+
to {
|
|
236
|
+
opacity: 1;
|
|
237
|
+
transform: translateY(0);
|
|
238
|
+
}
|
|
232
239
|
}
|
|
233
240
|
|
|
234
|
-
@keyframes
|
|
241
|
+
@keyframes askEyeBlink {
|
|
235
242
|
0%,
|
|
236
243
|
5% {
|
|
237
|
-
transform: scaleY(
|
|
244
|
+
transform: scaleY(1);
|
|
238
245
|
}
|
|
239
246
|
6%,
|
|
240
247
|
10% {
|
|
241
|
-
transform: scaleY(1);
|
|
248
|
+
transform: scaleY(1.3);
|
|
242
249
|
}
|
|
243
250
|
11%,
|
|
244
251
|
15% {
|
|
245
|
-
transform: scaleY(
|
|
252
|
+
transform: scaleY(1);
|
|
246
253
|
}
|
|
247
254
|
16%,
|
|
248
255
|
20% {
|
|
249
|
-
transform: scaleY(1);
|
|
256
|
+
transform: scaleY(1.3);
|
|
250
257
|
}
|
|
251
258
|
21%,
|
|
252
259
|
100% {
|
|
253
|
-
transform: scaleY(
|
|
260
|
+
transform: scaleY(1);
|
|
254
261
|
}
|
|
255
262
|
}
|
|
@@ -64,7 +64,7 @@ const AskNetlify: FunctionComponent = () => {
|
|
|
64
64
|
<rect
|
|
65
65
|
id="ask-netlify-eyelid-left"
|
|
66
66
|
x="3"
|
|
67
|
-
y="
|
|
67
|
+
y="7.3"
|
|
68
68
|
width="3"
|
|
69
69
|
height="2.5"
|
|
70
70
|
fill="var(--search-bg-color, currentColor)"
|
|
@@ -72,7 +72,7 @@ const AskNetlify: FunctionComponent = () => {
|
|
|
72
72
|
<rect
|
|
73
73
|
id="ask-netlify-eyelid-right"
|
|
74
74
|
x="9.7"
|
|
75
|
-
y="
|
|
75
|
+
y="7.3"
|
|
76
76
|
width="3"
|
|
77
77
|
height="2.5"
|
|
78
78
|
fill="var(--search-bg-color, currentColor)"
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
.n-search-modal {
|
|
7
7
|
--n-search-padding-inline: var(--space-s);
|
|
8
8
|
--n-search-color-text: var(--color-text-1, currentColor);
|
|
9
|
-
--n-search-color-text-secondary: var(--color-text-
|
|
9
|
+
--n-search-color-text-secondary: var(--color-text-weakest, currentColor);
|
|
10
|
+
--n-search-color-icon: var(--color-text-weakest);
|
|
10
11
|
--n-search-color-bg: var(--search-bg-color);
|
|
11
12
|
--n-search-color-bg-2: var(--color-bg-3);
|
|
12
13
|
--n-search-color-border: var(--color-bg-3);
|
|
@@ -75,8 +75,10 @@ export default function SearchWindow({
|
|
|
75
75
|
icon="lightbulb"
|
|
76
76
|
label="Toggle theme"
|
|
77
77
|
onClick={() => {
|
|
78
|
-
const
|
|
79
|
-
|
|
78
|
+
const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
79
|
+
const currentTheme = document.documentElement.getAttribute('data-theme');
|
|
80
|
+
const theme = isDarkTheme ? 'dark' : currentTheme ? currentTheme : 'light';
|
|
81
|
+
theme && handleThemeChange(ThemeMap[theme as Theme]);
|
|
80
82
|
}}
|
|
81
83
|
/>
|
|
82
84
|
</>
|
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
--color-text-accent: var(--teal-000);
|
|
60
60
|
--color-text-weak: var(--neutral-500);
|
|
61
61
|
--color-text-weaker: var(--neutral-400);
|
|
62
|
+
--color-text-weakest: var(--neutral-300);
|
|
62
63
|
--color-warning-bg: var(--gold-100);
|
|
63
64
|
--color-warning-border: var(--gold-300);
|
|
64
65
|
--color-warning-text: var(--gold-800);
|
|
@@ -238,6 +239,7 @@
|
|
|
238
239
|
--color-text-accent: var(--teal-600);
|
|
239
240
|
--color-text-weak: var(--neutral-300);
|
|
240
241
|
--color-text-weaker: var(--neutral-400);
|
|
242
|
+
--color-text-weakest: var(--neutral-300);
|
|
241
243
|
--color-warning-bg: var(--gold-200);
|
|
242
244
|
--color-warning-border: var(--gold-400);
|
|
243
245
|
--color-warning-text: var(--gold-900);
|
|
@@ -310,6 +312,7 @@
|
|
|
310
312
|
--color-text-accent: var(--teal-600);
|
|
311
313
|
--color-text-weak: var(--neutral-300);
|
|
312
314
|
--color-text-weaker: var(--neutral-400);
|
|
315
|
+
--color-text-weakest: var(--neutral-300);
|
|
313
316
|
--color-warning-bg: var(--gold-200);
|
|
314
317
|
--color-warning-border: var(--gold-400);
|
|
315
318
|
--color-warning-text: var(--gold-900);
|
|
@@ -381,6 +384,7 @@
|
|
|
381
384
|
--color-text-accent: var(--teal-000);
|
|
382
385
|
--color-text-weak: var(--neutral-500);
|
|
383
386
|
--color-text-weaker: var(--neutral-400);
|
|
387
|
+
--color-text-weakest: var(--neutral-300);
|
|
384
388
|
--color-warning-bg: var(--gold-100);
|
|
385
389
|
--color-warning-border: var(--gold-300);
|
|
386
390
|
--color-warning-text: var(--gold-800);
|
package/packages/utils/theme.ts
CHANGED
|
@@ -6,6 +6,10 @@ export const ThemeMap: Record<Theme, Theme> = {
|
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
export const handleThemeChange = (value: Theme) => {
|
|
9
|
+
const themeSelect = document.getElementById('site-theme-select') as HTMLSelectElement;
|
|
10
|
+
if (themeSelect) {
|
|
11
|
+
themeSelect.value = value;
|
|
12
|
+
}
|
|
9
13
|
const element = document.documentElement;
|
|
10
14
|
element.setAttribute('data-theme', value);
|
|
11
15
|
localStorage.setItem('theme', value);
|