@netlify/spark-ui 1.5.0-alpha.9 → 1.6.0

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,7 +107,7 @@ 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);
 }
 
@@ -118,6 +118,13 @@ h4,
   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);
+}
+
 /* Lists */
 li::marker {
   color: var(--color-icon);
@@ -128,18 +135,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);
@@ -148,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

@@ -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-left,
+.n-sidebar-right {
+  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-left > :first-child,
+.n-sidebar-right > :last-child {
+  flex-basis: var(--n-sidebar-size, initial);
+  flex-grow: 1;
+}
+
+.n-sidebar-left > :last-child,
+.n-sidebar-right > :first-child {
+  flex-basis: 0;
+  flex-grow: 999;
+  min-inline-size: var(--n-sidebar-min, 60%);
+}

package/packages/styles/tokens.css

@@ -3,10 +3,6 @@
  * ------------------------------------------- */
 
 :root {
-  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
-  --badge-bg-color: var(--neutral-100);
-  --badge-border-color: var(--neutral-300);
-  --badge-text-color: var(--neutral-500);
   --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
   --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
   --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -156,12 +152,8 @@
   --red-700: color(srgb 0.6862745098039216 0.1450980392156863 0.21176470588235294);
   --red-800: color(srgb 0.5019607843137255 0.0392156862745098 0.12549019607843137);
   --red-900: color(srgb 0.23921568627450981 0.10980392156862745 0.10588235294117647);
-  --search-answer-message-color: var(--neutral-200);
-  --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);
   --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);
@@ -176,7 +168,11 @@
   --space-s: 1rem;
   --space-xl: 3rem;
   --space-xs: 0.75rem;
-  --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
+  --tabbed-content-bg-color: var(--neutral-000);
+  --tabbed-content-bg-color-active: var(--neutral-000);
+  --tabbed-content-border-color: var(--color-icon);
+  --tabbed-content-code-bg-color: var(--neutral-900);
+  --tabbed-content-tab-text-color-active: var(--color-icon);
   --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
   --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
   --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
@@ -192,10 +188,6 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
-    --badge-bg-color: var(--neutral-700);
-    --badge-border-color: var(--neutral-600);
-    --badge-text-color: var(--neutral-100);
     --button-outline-bg-color: color(srgb 0 0 0 / 0);
     --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
     --button-outline-stroke-color: var(--teal-200);
@@ -243,6 +235,7 @@
     --color-warning-text: var(--gold-900);
     --eyebrow-text-color: var(--teal-200);
     --heading-text-color: var(--neutral-100);
+    --neutral-000: color(srgb 0 0 0);
     --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
     --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
     --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -252,22 +245,18 @@
     --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
     --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
     --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
-    --search-answer-message-color: var(--neutral-600);
-    --search-back-btn-bg-color: var(--neutral-500);
     --search-bg-color: var(--neutral-700);
     --search-highlight-color: var(--teal-800);
-    --search-loading-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);
+    --tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+    --tabbed-content-bg-color-active: var(--teal-900);
+    --tabbed-content-border-color: var(--color-icon);
+    --tabbed-content-code-bg-color: var(--neutral-900);
+    --tabbed-content-tab-text-color-active: var(--color-icon);
     --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
   }
 }
 
 [data-theme="dark"] {
-  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
-  --badge-bg-color: var(--neutral-700);
-  --badge-border-color: var(--neutral-600);
-  --badge-text-color: var(--neutral-100);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
   --button-outline-stroke-color: var(--teal-200);
@@ -315,6 +304,7 @@
   --color-warning-text: var(--gold-900);
   --eyebrow-text-color: var(--teal-200);
   --heading-text-color: var(--neutral-100);
+  --neutral-000: color(srgb 0 0 0);
   --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
   --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
   --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -324,21 +314,17 @@
   --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
   --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
   --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
-  --search-answer-message-color: var(--neutral-600);
-  --search-back-btn-bg-color: var(--neutral-500);
   --search-bg-color: var(--neutral-700);
   --search-highlight-color: var(--teal-800);
-  --search-loading-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);
+  --tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
+  --tabbed-content-bg-color-active: var(--teal-900);
+  --tabbed-content-border-color: var(--color-icon);
+  --tabbed-content-code-bg-color: var(--neutral-900);
+  --tabbed-content-tab-text-color-active: var(--color-icon);
   --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
 }
 
 [data-theme="light"] {
-  --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
-  --badge-bg-color: var(--neutral-100);
-  --badge-border-color: var(--neutral-300);
-  --badge-text-color: var(--neutral-500);
   --button-outline-bg-color: color(srgb 0 0 0 / 0);
   --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
   --button-outline-stroke-color: var(--neutral-800);
@@ -395,13 +381,13 @@
   --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
   --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
   --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
-  --search-answer-message-color: var(--neutral-200);
-  --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);
-  --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
+  --tabbed-content-bg-color: var(--neutral-000);
+  --tabbed-content-bg-color-active: var(--neutral-000);
+  --tabbed-content-border-color: var(--color-icon);
+  --tabbed-content-code-bg-color: var(--neutral-900);
+  --tabbed-content-tab-text-color-active: var(--color-icon);
   --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
 }
 

package/packages/themes/poimandres.json

@@ -2,7 +2,7 @@
   "name": "poimandres",
   "type": "dark",
   "colors": {
-    "editor.background": "#1b1e28",
+    "editor.background": "transparent",
     "editor.foreground": "#e4f0fb",
     "editorCursor.foreground": "#add7ff",
     "editorIndentGuide.background": "#303340",
@@ -71,11 +71,7 @@
     },
     {
       "name": "Tag",
-      "scope": [
-        "entity.name.tag",
-        "meta.tag.sgml",
-        "markup.deleted.git_gutter"
-      ],
+      "scope": ["entity.name.tag", "meta.tag.sgml", "markup.deleted.git_gutter"],
       "settings": {
         "foreground": "#5de4c7"
       }
@@ -177,11 +173,7 @@
     },
     {
       "name": "Sub-methods",
-      "scope": [
-        "entity.name.module.js",
-        "variable.import.parameter.js",
-        "variable.other.class.js"
-      ],
+      "scope": ["entity.name.module.js", "variable.import.parameter.js", "variable.other.class.js"],
       "settings": {
         "foreground": "#f95c5b"
       }
@@ -204,10 +196,7 @@
     },
     {
       "name": "meta.method.js",
-      "scope": [
-        "meta.class-method.js entity.name.function.js",
-        "variable.function.constructor"
-      ],
+      "scope": ["meta.class-method.js entity.name.function.js", "variable.function.constructor"],
       "settings": {
         "foreground": "#5fb3ff"
       }
@@ -299,13 +288,11 @@
     },
     {
       "name": "ES7 Bind Operator",
-      "scope": [
-        "source.js constant.other.object.key.js string.unquoted.label.js"
-      ],
+      "scope": ["source.js constant.other.object.key.js string.unquoted.label.js"],
       "settings": {
         "fontStyle": "italic",
         "foreground": "#f95c5b"
       }
     }
   ]
-} 
+}

package/dist/assets/AskNetlify.css

@@ -1 +0,0 @@
-.chat-container{opacity:0;animation:appearContainer .12s ease-in-out forwards;animation-delay:.14s}@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)}.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:translate(-.75rem);text-wrap:pretty;text-align:left}.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}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.message{display:grid;gap:var(--space-s);margin-block-start:var(--space-2xl)}.message-bubble{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)}.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{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}.prose code{overflow-x:auto}.prose code[class*=language-],.prose 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-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(--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{width:fit-content;background:transparent;position:absolute;z-index:1;padding:.5rem 1rem;background:var(--search-back-btn-bg-color);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(--color-bg-3);color:var(--color-text-1);border-width:.5px}.message-loader{width:43px;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:tickFlicker .8s ease-in-out infinite}#ask-netlify-tick-1{animation-delay:.1s}#ask-netlify-tick-2{animation-delay:.2s}#ask-netlify-tick-3{animation-delay:.3s}@keyframes tickFlicker{0%{opacity:0}to{opacity:1}}

package/dist/assets/Orb.css

@@ -1 +0,0 @@
-@property --angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}:root{--bg: oklch(12.9% .042 264.695);--c1: oklch(44.4% .177 26.899);--c2: oklch(85.2% .199 91.936);--c3: oklch(58.8% .158 241.966)}.orb{display:grid;grid-template-areas:"stack";inline-size:min(80vmin,100%);aspect-ratio:1;overflow:hidden;border-radius:50%}.orb:before,.orb:after{content:"";display:block;grid-area:stack;width:100%;height:100%;border-radius:50%;transform:translateZ(0)}.orb:before{background:conic-gradient(from calc(var(--angle) * 2) at 25% 70%,var(--c3),transparent 20% 80%,var(--c3)),conic-gradient(from calc(var(--angle) * 2) at 45% 75%,var(--c2),transparent 30% 60%,var(--c2)),conic-gradient(from calc(var(--angle) * -3) at 80% 20%,var(--c1),transparent 40% 60%,var(--c1)),conic-gradient(from calc(var(--angle) * 2) at 15% 5%,var(--c2),transparent 10% 90%,var(--c2)),conic-gradient(from calc(var(--angle) * 1) at 20% 80%,var(--c1),transparent 10% 90%,var(--c1)),conic-gradient(from calc(var(--angle) * -2) at 85% 10%,var(--c3),transparent 20% 80%,var(--c3));box-shadow:inset var(--bg) 0 0 5vmin 1vmin;filter:blur(3vmin) contrast(5);animation:rotate 20s linear infinite}.orb:after{--dot: 1.5px;background-image:radial-gradient(circle at center,var(--bg) var(--dot),transparent var(--dot));background-size:calc(var(--dot) * 2) calc(var(--dot) * 2);-webkit-mask-image:radial-gradient(black 25%,transparent 75%);mask-image:radial-gradient(black 25%,transparent 75%);-webkit-backdrop-filter:blur(8vmin) contrast(10);backdrop-filter:blur(8vmin) contrast(10);mix-blend-mode:overlay}@keyframes rotate{to{--angle: 360deg}}